React / Redux: правильный способ обновления объекта в редукторе

Question

У меня проблемы с обновлением объекта в моем React / Redux редукторе.Начальное состояние является объектом неизменяемого.Я застрял, пытаясь обновить объект.

import Immutable from 'immutable';
import * as actionTypes from '../actions/actionTypes';

const initialState = Immutable.fromJS({
  user: {
    id: null,
    name: null,
    age: null
  }
});

export default function addUserReducer(state = initialState, action) {
  switch(action.type) {
    case actionTypes.ADD_USER:
      const user = {
        id: action.id,
        name: action.name,
        age: action.age
      }

      return state.setIn(['user'], user);
    default:
      return state;
  }
}

Состояние всегда возвращает карту со значениями id, name и age как null.

Какой правильный способ обновлениясостояние в моем редукторе?

Answer 1

Ваш код выглядит нормально, и когда я запускаю его в репле, он работает.

Я проверил его, добавив следующее:

const newState = addUserReducer(undefined, {
  type: 'ADD_USER', // I just assumed that's what your type resolves to.
  id: 1,
  name: 'FOO',
  age: 100,
});
console.log(newState); // Logs "Map { "user": [object Object] }"
console.log(Immutable.Map.isMap(newState); // true
console.log(Immutable.Map.isMap(newState.get('user'))) //false

Я подозреваю причину, по которой он не работаетвы, потому что фактический тип вашего действия на самом деле не равен actionTypes.ADD_USER.Я бы дважды проверил этот случай в редукторе.Простой журнал в этом случае должен сказать вам.

Кроме того, как уже говорилось в других комментариях, прямо сейчас ваш случай ADD_USER устанавливает пользователя в качестве объекта NON-Immutable, поэтому вместо этого измените оператор возврата ADD_USER следующим образом:

state.set('user', Immutable.Map(user));

Также обратите внимание, что, поскольку «пользователь» является ключом верхнего уровня, метод Maps .set работает просто отлично.

Answer 2

Используйте функцию слияния в неизменяемом для изменения состояния. Это может быть реализовано так

import Immutable from 'immutable';
import * as actionTypes from '../actions/actionTypes';

const initialState = Immutable.fromJS({
  user: {
    id: null,
    name: null,
    age: null
  }
});

export default function addUserReducer(state = initialState, action) {
  switch(action.type) {
    case actionTypes.ADD_USER:
      // This will update the state in the reducer if you are using immutable library
      return state.merge({
        id: action.id,
        name: action.name,
        age: action.age
      });
    default:
      return state;
  }
}

Answer 3

вы получаете данные от действия как "action.payload", а затем вы можете обновить свое состояние редуктора следующим образом:

const initialState = {
  user: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        user: action.payload
      };

    default:
      return state;
  }
}