How change value of nested array in redux reducer

Have a spread party...

case SET_NAME:
  return {
    ...state,
    data: {
      ...state.data,
      users: [
        ...(state.data.users.map(user =>
          user.id === action.payload.id
          ? { ...user, value: action.payload.value }
          : user
        ))
      ]
    }
  };

It seems like there are 3 issues with your reducer:

• data is missing in your returned object
• the call to the map function of the users array is missing
• your example would set any item which is not matching the id of the action to null instead of preserving it.

You probably ment to do this:

return {
    ...state,
    data: {
        ...state.data,
        users: state.data.users.map(item =>
            item.id == action.payload.id ? { ...item, value: action.payload.value } : item
        )
    }
};

for this action:

{
   type: SET_NAME,
   payload: { id: 1, value: 'test' }
}

the resulting state will be this:

{
   data: {
     users: [
        {
            id: 1,
            name: 'a',
            value: 'test'
        },
        {
            id: 2,
            name: 'b'
        }
     ]
   }
}

If you want to set the name to the value from the action, you can just override it in the reducer. In that case the whole reducer would be:

return {
    ...state,
    data: {
        ...state.data,
        users: state.data.users.map(item =>
            item.id == action.payload.id ? { ...item, name: action.payload.value } : item
        )
    }
};

and the result state for the above action would be this:

{
   data: {
     users: [
        {
            id: 1,
            name: 'test'
        },
        {
            id: 2,
            name: 'b'
        }
     ]
   }
}

Try this:

return {
    ...state,
    data: {
            // add "state.data" if there is any other data than the users 
            // array that you don't want to be removed or changed  
            ...state.data,
            users: state.data.users((item, i) =>
                item.id == action.payload.id
                ? { ...item, value: action.payload.value }
                : null
            )
        }

If it didn't, this should work:

// Will loop over the existing users array in the state and return an array.
const updatedUsers = state.data.users.map((item, i) => {
            // If the item exist and matches the id of the payload,
            // it will update it
            if (item.id === action.payload.id) {
                item.value = action.payload.value;
            }
            return item;
        });

        // And here is a console log to see the updated array
        console.log(updatedUsers)

        return {
            ...state,
            // This is how you update a nested array
            data: { ...state.data, users: updatedUsers }
        };