Как изменить / обновить значение в магазине в избыточной версии в реагировать-родной

Question

Я использую Redux для хранения данных пользователя, таких как его имя, идентификатор пользователя, изображение пользователя и электронная почта пользователя в 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') {

     state.user.splice(0)

    return Object.assign({}, state, {
      user: state.user.concat(action.payload)
    });

  }


  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 После строки выше я звоню

let a = JSON.stringify(this.props.user)
  console.log("val-----------",a)

Я имею в виду после обновления данных я пытаюсь получить последнюю версию, но этодает мне пустой массив

val----------- []

Скажите, пожалуйста, как изменить весь объект, так и изменить конкретное поле, например, электронную почту? Спасибо заранее!

Answer 1

В документации по редуксу вы можете найти рецепты для вставки / удаления / обновления элемента в массиве состояний.

Answer 2

!!! это пример для хранения данных ТОЛЬКО ОДНОГО ПОЛЬЗОВАТЕЛЯ в Redx, и это не сработает, если у вас много пользователей для хранения !!!

    const initialState = {
        user: {  }
    };
    function rootReducer(state = initialState, action) {
        switch (action.type) {
            case "ADD_USER":
                return {
                    ...state,
                    user: action.payload
                };
            case "REMOVE_USER":
                return {
                    ...state,
                    user: {}
                };

            case "UPDATE_USER":
                /* so you return a new state object with all the data from old state
                user also contain the data from old state.user but you update some of his parameters
                like this.props.updateUser({  email:'abc@gmail.com' }); update only email field 
                this.props.updateUser({   user_name : 'sdfd' , email:'abc@gmail.com' }); update only user_name field

                change the name of action too, because later you will add more item in the redux and "change" dont say it change what ( just an idea )
                */
                return {
                    ...state,
                    user: {
                    ...state.user,
                    ...action.payload
                    }
                };

            default: return state;
        }
    }
    export default rootReducer;