React Redux:在动作调度时使用新值更新本地状态

Question

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

这是非常基本的，但是我有点迷失在如何将新的供应商添加到已经存在的供应商状态。

下面是操作(新创建的供应商被传递给它):

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

这是我的reducer文件以及错误行(一切工作正常，除了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下给了我一个错误标记(我猜它只期望一个值)。我是不是不用担心退回旧的状态值，退回新的供应商就可以了?(我想我在减速器的工作原理上遗漏了一两个点)。

谢谢你的帮助。

Answer 1

我猜您是想使用展开操作符，如下所示:

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

action.sup不是对象属性，它是对象。我假设你只是想把这些属性应用到你的状态对象。

我还应该注意到，你的reducer通常应该总是以相同的形状返回一个状态对象。对于每一个动作。所以如果你的初始状态对象是{ prop1: 1, prop2: 2, prop3: 3 }，它应该总是返回类似的东西，只是不同的值。我这么说是因为它看起来像你的"load_provider"动作是做自己的事情而不是复制当前状态。只要记住，你的状态对象是"全局"访问的。在Redux中(我使用这个术语很随意)。使用Redux状态的组件将期望某个对象形状和某些属性总是在那里，所以你需要确保你总是返回你的reducer。希望你能理解。