React Redux:在Reduce状态下使用不可变

Question

我正在学习Immutable.js，但我在使用reducers中的Immutable.js时遇到了困难。

我这样声明了我的initialState：

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中，我将deafult状态声明为不可变的Map()对象：

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

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

import { combineReducers } from 'redux-immutable';  

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

Answer 1

toJS和fromJS是开销很大的操作。您不应该对initial_state或fromJS执行状态。

我建议你在你的用户减少器上做这件事，以获得更好的性能，而不要处理toJS和fromJS。还可以在您的代码(选择器、组件、视图)中使用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时使用不可变。你不需要任何不可变的操作，因为它假设存储是不可变的。所以不可变的应该是你的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;
}

​

在文件state/reducers中，您拥有不同实体的所有缩减程序：

​

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;

​

最好的！

Answer 2

我假设在reducer中返回的state不是不可变的映射。据我所知，您只是使用fromJS(...)将初始状态转换为不可变的映射，您可以尝试在您的reducer中执行相同的操作。

return fromJS(state)
        .setIn(.setIn(['users', 'isLoading'], false)
        .setIn(['users', 'items'], fromJS(action.users))

但我建议你看看this documentation，因为它针对的是你的需求。