(React) Redux state not filitering

Question

I can change an item in my list if the item's boolean property value changes, my list updates. However, if I try to change a string property and return the payload my list isn't updated.

This works when I directly change the item and return it.

case UPDATED_LISTITEM:
  let newList = state.list.filter((item) => {
    if (item._id !== payload._id) {
      return item;
    } else {
      item.title = payload.title;
      item.checked = payload.checked;
      return item;
    }
  });

  return {
    ...state,
    list: newList,
  };

This doesn't work when I try to return the payload and I only update the 'title'. If I update the 'checked' the state returns properly.

case UPDATED_LISTITEM:
  return {
    ...state,
    list: state.list.filter((item) => {
      if (item._id !== payload._id) {
        return item;
      } else {
        return payload;
      }
    }),
  };

  

Answer 1

There's a couple different problems here.

One is that this code is mutating the item, and that is never allowed when using Redux:

item.title = payload.title;
item.checked = payload.checked;

Redux requires immutable updates, which means always making copies of the data.

Another is that you're using the wrong array method. You're calling list.filter(), but you're always returning items. I think you want to use list.map() instead.

Beyond that, I'm afraid that the style of Redux code you're writing is very outdated. It looks like you're "hand-writing" your reducers, immutable updates, and action types.

Today, we teach "modern Redux" with Redux Toolkit and the React-Redux hooks API, which is much simpler to learn and use. The code you're writing will run, but it's going to require writing at least 4x as much code, and will be more confusing.

I'd strongly recommend reading through our official Redux docs tutorials, which teach Redux Toolkit and React-Redux hooks as the standard approach:

https://redux.js.org/tutorials/index

Answer 2

Version without mutating the state:

case UPDATED_LISTITEM:
  return {
    ...state,
    list: state.list.map((item) => ({
      ...item, // item must not contain more deeply nested objects!

      // Update title and checked from payload
      ...(
        item._id === payload._id ?
          { title: payload.title, checked: payload.checked } : {}
      )
    }),
  };

As the other answer stated, it's easier with redux toolkit. The old way involves carefully reconstructing the state, heavy use of spread operator (...). It's error prone with deeply nested objects.