javascript - react Redux : Using Immutable in Reduce State

Question

我正在学习 Immutable.js，但我在 reducer 中处理 Immutable.js 时遇到困难。
我已经像这样声明了我的初始状态:

import { fromJS } from 'immutable';

const INITIAL_STATE = fromJS({
  users: {
    isLoading: false,
    items: []
  }
});  

我正在尝试修改初始状态，但收到错误:“state.setIn 不是函数”。

case 'FETCH_USERS_SUCCESS':
      return state
        .setIn(['users', 'isLoading'], false)
        .setIn(['users', 'items'], action.users)

在index.js 中，我将默认状态声明为 Immutable Map() 对象:

let store = createStore(..., Map({}), composeEnhancers(...));

在 mergeReducers 中，我使用“redux-immutable”。

import { combineReducers } from 'redux-immutable';  

使用 Immutable.js 修改 reducer 状态的正确方法是什么？

Answer 1

toJS 和 fromJS 是昂贵的操作。 您不应该执行initial_state 或state 的fromJS。

我建议您在用户 reducer 上执行此操作以获得更好的性能并且不要处理 toJS 和 fromJS。还可以在代码(选择器、组件、 View )中使用 get 来检索任何值。

import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
import { FETCH_USERS_SUCCESS } from './constants'; // or whatever you have your constants file

const initialState = new ImmutableMap({
   isLoading: false,
   items: new ImmutableList([]);
});

function users(state = initialState, action) {
  switch (action.type):
   case FETCH_USERS_SUCCESS:
    return state.merge({
      isFetching: false,
      users: action.users
    });
   default:
    return state; 
}

请在创建 Store 时不要使用 immutable。您不需要任何不可变的操作，因为它应该是不可变的。 因此，Reducer 中的任何数据结构都应该是不可变的。

这是常见配置存储文件(或您的情况下的索引)的示例:

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from 'state/reducers';

export default function configureStore(initialState = {}) {
  const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunk)),
  );
  // to query state in the console
  window.appState = store.getState();

  if (module.hot) {
    const nextReducer = require('state/reducers');
    module.hot.accept('state/reducers', () => {
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

在文件状态/ reducer 中，您拥有不同实体的所有 reducer :

import { combineReducers } from 'redux';
import users from './users';

const ownReducers = {};

const appReducer = combineReducers({
  ...ownReducers,
  // add here your reducers after importing the entity state
  // i.e: myStuff: myStuff.reducer, etc...
  users: claims.reducer,
});

const rootReducer = (state, action) => {
  return appReducer(state, action);
};

export default rootReducer;

最好!