Как обновить значение объекта в списке массива в хранилище в Redux

Question

Приложение должно хранить список пользовательских данных в массиве. Данные пользователя могут быть следующими: имя, адрес электронной почты, изображение и т. Д. Я использую Redux для хранения данных о пользователе. Вот редуктор для этого

const initialState = {
  user: []
};
function rootReducer(state = initialState, action) {

  if (action.type === 'ADD_USER') {
    return Object.assign({}, state, {
      user: state.user.concat(action.payload)
    });

  }
  if (action.type === 'REMOVE_USER') {
    //return Object.assign({}, initialState)
    return {
      ...state,
      user : []
    }

  }
  if (action.type === 'CHANGE_USER') {


  }


  return state;
};
export default rootReducer;

Чтобы добавить пользователя, я отправляю вот так

 let user_id = response[0][1]
          let user_name = response[1][1]
          let user_image = response[2][1]
          let email = response[3][1]

            this.props.add({ user_id, user_name, user_image, email });

Предположим теперь, что я хочу изменить адрес электронной почты или имя пользователя, так какЯ изменяю / обновляю определенное поле как электронная почта? В настоящее время я делаю это

this.props.change({ user_id : 1, user_name : 'sdfd', user_image:'', email:'abc@gmail.com' });

Это пропускает действие

CHNAGE_USER

Но я понятия не имею, как я могу изменить только определенные ключевые данные в списке пользователей. Скажем, я хочу изменить адрес электронной почты пользователя с идентификатором 3 в списке пользователей в онлайн-магазине?

Answer 1

Вы можете использовать .map() для создания обновленного списка пользователей, где в логике .map() идентифицируйте идентификатор пользователя, который соответствует вашей полезной нагрузке действия, а затем обновите их информацию. Попробуйте что-то вроде этого:

  if (action.type === 'CHANGE_USER') {
     return {
         user: state.user.map((user) => {
            if(user.user_id === action.payload.user_id){
               return {
                  ...user,
                  ...action.payload
               }
            } else {
               return user
            }
         })
     }
  }

Answer 2

Вы можете сделать это как

if (action.type === 'CHANGE_USER') {
  const updatedUsers = state.user.filter(user => user.user_id !== action.user_id)
  return updatedUsers;
 }

Надеюсь, это поможет