Reputation: 1035
I have a reducer
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};
I need to update an existing value in array elements, that I get by the index passed in action. I can do it like this
state.elements[action.key] = {"flag": !action.flag}
but then I'll change existing state. according to the redux principles, I can't do it. So I have to use spread operator and change new object. But I don't know how to use it this way. Tried something like this
...state, elements[action.index]: {"flag": !action.flag}]
but it isn't worked. Is there a way to do what I want?
Upvotes: 0
Views: 233
Reputation: 36999
return {
...state,
elements: state.elements.map((element, index) => {
if (index === action.key) {
return {"flag": !action.flag}
}
return element
})
}
array#map
will create a new array, and change only the item whose index match action.key
.
If you find this process tedious, you could use libraries that let mutate your state while keeping the reducer returning new state. One of those is immer
.
Upvotes: 2