时间戳

首页 > 解决方案 > React / Redux：在reducer中更新对象的正确方法

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

问题描述

我在更新 React / Redux 减速器中的对象时遇到问题。初始状态是 Immutable 的对象。我一直在尝试更新对象。

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。

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

标签： reactjsredux

解决方案

您的代码看起来不错，当我在 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 案例正在将用户设置为非不可变对象，因此改为修改 ADD_USER 返回语句，如下所示：

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

另请注意，由于 'user' 是顶级键，因此 Maps .set 方法可以正常工作。

推荐阅读