React.js：使用redux-saga无法在App组件获取更新后的状态

你的productsReducer存在两个核心问题，导致Redux状态更新后App组件无法感知：

• 直接修改原状态对象：Redux要求reducer必须是纯函数，绝对不能直接修改传入的state对象。你代码里的state.products = action.products属于直接修改原对象，Redux无法检测到这种变化，自然不会触发组件重新渲染。
• 未返回有效状态：reducer的每个分支都必须返回一个状态值。你的代码在FETCH_PRODUCTS_SUCCESS分支修改状态后没有返回值，default分支也未返回原状态，这会导致reducer最终返回undefined，直接破坏Redux状态树。

修复后的productsReducer.js代码如下：

import { FETCH_PRODUCTS_SUCCESS } from "../types/action";

const initialState = {
  products: []
};

export const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_PRODUCTS_SUCCESS:
      // 创建新状态对象，保持原状态不可变
      return {
        ...state,
        products: action.products
      };
    default:
      // 默认分支返回原状态
      return state;
  }
};

关键说明： #

• 使用扩展运算符...state复制原状态的所有属性，再覆盖products字段，既保留了原状态的其他数据，又生成了全新的对象，Redux能准确检测到状态变化。
• 每个分支都返回明确的状态值，确保Redux状态树始终处于有效状态。

内容的提问来源于stack exchange，提问作者Subhojit