更新化简器中数组中的值

Question

我有一个减速器

const initialState = {
elements: [{"flag": false}, {"flag": false}]
};
const checkReducer = function (state = initialState, action) {
switch (action.type) {
case CHANGE_CHECK:
return {...state, //here I want update element by index, that pass in action};

我需要更新数组元素中的现有值，该值是通过操作中传递的索引获得的。 我可以这样做

state.elements[action.key] = {"flag": !action.flag}

但随后我将更改现有状态。 根据 redux 原则，我做不到。 所以我必须使用扩展运算符并更改新对象。但我不知道如何以这种方式使用它。 尝试过这样的事情

...state, elements[action.index]: {"flag": !action.flag}] 

但它不起作用。有没有办法做我想做的事？

Answer 1

return {
...state,
elements: state.elements.map((element, index) => {
if (index === action.key) {
return {"flag": !action.flag}
}
return element
})
}

array#map将创建一个新数组，并仅更改索引与action.key匹配的项目。

如果你觉得这个过程很乏味，你可以使用库来改变你的状态，同时保持化简器返回新状态。其中之一是immer.