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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React / Redux:在reducer中更新对象的正确方法相关的知识,希望对你有一定的参考价值。

我在React / Redux reducer中更新对象时遇到问题。初始状态是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。

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

答案

你的代码看起来没问题,当我在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。我会在reducer运行中仔细检查那个案例。在这种情况下,一个简单的日志应该告诉你。

另外,和上面的其他注释一样,现在你的ADD_USER案例是将用户设置为NON-Immutable对象,所以改为修改ADD_USER返回语句,如下所示:

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

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

另一答案

在immutable中使用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;
  }
}
另一答案

您从操作中获取数据为“action.payload”,然后您可以像这样更新您的reducer状态:

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中更新对象的正确方法的主要内容,如果未能解决你的问题,请参考以下文章

React Redux reducer 未更新状态

在 React/Redux reducer 中,如何以不可变的方式更新嵌套数组中的字符串?

React中详解redux

React Reducer不会更新State

React Redux:reducers 是不是应该包含任何逻辑

React Native - Redux 不会立即更新