Question

我在更新我的React / Redux reducer中的对象时遇到麻烦。初始状态是不可变的对象。我一直在尝试更新对象。

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，名称和年龄为空的地图。

在我的reducer中更新状态的正确方法是什么？

Answer 1

您的代码看起来还不错，当我在一个repl中运行它时，它就可以工作。

我通过添加以下内容对其进行了测试：

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

不可更改地使用 merge 功能更改状态。可以像这样实现

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;
  }
}

React / Redux：在reducer中更新对象的正确方法

3 个答案: