Question

我有一个在数据库中创建“供应商”的操作，当它完成时，它调用另一个应该在本地创建供应商的操作（通过 redux）。

这是非常基本的，但我对如何将新供应商添加到现有供应商状态有点迷茫。

这是操作（新创建的供应商被传递给它）：

export const createSup = (sup) => {
  return {
      type: "CREATE_SUP",
      sup,
  };
};

这是我的减速器文件以及错误行（除了 CREATE_SUP 情况外，一切正常）：

const initialState = {
  value : {},
  loaded: false,
  error: false
}

const supReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'LOAD_SUPPLIERS': 
      return {
        value: action.sups,
        loaded: false,   //this might need to be set to true
        error: false
      }
      case 'LOAD_SUPPLIERS_ERROR': 
        console.log("load suppliers error")
        return {
          ...state,
          loaded: false,   
          error: true
        }
      case 'LOAD_SUPPLIERS_SUCCESS': 
        return {
          ...state,
          loaded: true,   
          error: false
        }
      case 'CREATE_SUP':
        return {
          value: {...state.value, action.sup}, //************ERROR *************//
          loaded: true,   
          error: false
        }
      default:
        return state;
    }
  };

  export default supReducer;

它在 action.sup 下给了我一个错误标记（我猜它只需要一个值）。我是不是应该不用担心返回 state 的旧值，只返回新的供应商？（我想我在减速器的工作原理上遗漏了一两点。

感谢您的帮助。

Answer 1

我的猜测是您打算使用扩展运算符，如下所示：

  case 'CREATE_SUP':
    return {
      value: { ...state.value, ...action.sup }, 
      loaded: true,   
      error: false
    }

action.sup 不是对象属性，而是一个对象。我假设您只想将这些属性应用于您的状态对象。

我还应该注意，您的减速器通常应该始终为每个动作返回一个具有相同“形状”的状态对象。所以如果你的初始状态对象是 { prop1: 1, prop2: 2, prop3: 3 }，它应该总是返回类似的东西，只是具有不同的值。我这样说是因为看起来您的“LOAD_SUPPLIERS”操作有点做自己的事情而不是复制当前状态。请记住，您的状态对象旨在通过 Redux“全局”访问（我松散地使用这个术语）。使用您的 Redux 状态的组件将期望某个对象形状和某些属性始终存在，因此您需要确保始终使用 reducer 返回它。希望这是有道理的。

React Redux：在动作分派时使用新值更新本地状态

1 个答案: