更改状态减少器redux中的属性值

Question

I have a reducer that's state is an array of objects.

state = [{
      id: 1,
      name: 'peter',
      visible: false
    },
    {
      id: 2,
      name: 'alan',
      visible: false
    ];

The relevant part of my reducer looks like this.

action.id here is 1

case 'TOGGLE_VIEW':

    return state.map(item => {

        if(item.id === action.id) {

            item.visible = !item.visible;

        }

    });

The code above returns state to be [null, null]

Can anyone explain how I can change the value of property in the state based on an id passed in?

Answer 1

Following up on naortor's answer, since redux state should be immutable, you should do this:

case 'TOGGLE_VIEW':
  return state.map(item => {

    if (item.id === action.id) {
      return {
        ...item,
        visible: !item.visible,
      }
    }

    return item

  });

Answer 2

You are missing a return inside the map callback function

case 'TOGGLE_VIEW':

return state.map(item => {

    if(item.id === action.id) {

        item.visible = !item.visible;

    }

    return item // you need a return inside your map callback function.

});