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};

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

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的项目。

如果您发现此过程很繁琐，则可以使用在使reducer返回新状态的同时使状态发生变化的库。其中之一是immer。

在reducer中更新数组中的值

1 个答案: