在我的应用程序中,我正在显示人员数据。 我有一个可以输入新人的场景。到目前为止,我得到了这个: reducer :
export default function (state = [], action) {
console.log("Reducing");
switch (action.type) {
case 'ADD':
console.log("ADDING!");
return action.payload;
break;
}
return state;
}
行动:
export const addPerson = (person) => {
console.log("addPerson Action Fired! ", person);
return {
type: 'ADD',
payload: person
}
};
我有一个 reducer,我在我的应用程序中显示了很少的人员数据,但在添加新人员时我被阻止了。到目前为止,我可以在控制台日志中看到我的输入,但无法弄清楚如何将它添加到状态。 非常感谢您的帮助。
这是我显示数据的 reducer 。
export default function () {
return ["abc","def","ghi","jkl"]
}
现在我正在显示数组中这些元素的列表(每个都是一个人)。当我添加一个时,它会与这些人一起添加并显示更新后的列表。
最佳答案
您应该在 reducer 中执行以下操作:
export default function (state = [], action) {
console.log("Reducing");
switch (action.type) {
case 'ADD':
return [
...state,
action.payload,
]
}
return state;
}
通过这种方式,您可以将此人添加到现有数组中。否则,您会将当前的 state
值从数组更改为对象。
让我们考虑您的 person 对象值如下,您发送它:
{
type: 'ADD',
payload: {
id: 1,
name: 'John Doe',
}
}
使用您之前的代码,您将拥有当前值:
// First step
return action.payload;
// Second step
return { id: 1, name: 'John Doe' };
修改后的代码:
// First step
return [
...state,
action.payload,
]
// Second step
return [
...[],
{ id: 1, name: 'John Doe' },
]
// Third step
return [{ id: 1, name: 'John Doe' }];
关于javascript - 使用输入更新 reactjs 中的 redux 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47043789/