redux+immutable.js+redux-persist,state无法使用immutable方法

Question

• 报错信息

• 问题仓库重现链接，

redux与immutable.js和redux-persist,组件mapStateToProps中的state不是一个immutable对象

此时如何让mapStateToProps里的state变成immutable对象？

• 项目目录

├── node_modules
├── package.json
├── public
├── README.md
├── src
    ├── App.js
    ├── index.js
    └── stor
        ├── actions.js
        ├── index.js
        ├── reducer.js
        └── state.js
└── yarn.lock

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
    
  </Provider>, 
  document.getElementById('root')
);

• src/App.js

import React from 'react';
import { connect } from 'react-redux';
// import {fromJS} from 'immutable';
class App extends React.Component {
  render() {
    const { a, b } = this.props;
    return (
      <div>
        <div style={{fontSize: '30px'}}>
          a= {a} --- b={b}
        </div>
      </div>
    )
  }
}
const mapStateToProps = state => {
  console.log(state);
  // 这里的state，不是一个immutable对象，难搞
  // state = fromJS(state)
  // console.log(state);
  return {
    a: state.getIn(["reducerA", "a"]),
    b: state.getIn(['reducerB', 'b'])
  }
  // return {
  //   a: state.reducerA.getIn(["a"]),
  //   b: state.reducerB.get('b')
  // }
}
export default connect(mapStateToProps, null)(App);

• src/store/state.js

import { fromJS } from 'immutable';

const dataA = fromJS({
  a: 1
})
const dataB = fromJS({
  b: 2
})

export {
  dataA,
  dataB
}

• src/store/actions.js

export const setA = a => { 
  return {
    type: 'SET_A',
    a
  }
}

export const setB = b => { 
  return {
    type: 'SET_B',
    b
  }
}

• src/store/reducer.js

import { combineReducers } from 'redux';
import { dataA, dataB }  from './state';

const reducerA = (state = dataA, action) => {
  switch(action.type) {
    case 'SET_A':
      return state.set('a', action.a);
    default:
      return state;
  }
}

const reducerB = (state = dataB, action) => {
  switch (action.type) {
    case 'SET_B':
      return state.set('b', action.b);
    default:
      return state;
  }
}

const allReducer = {
  reducerA,
  reducerB
}

const rootReducer = combineReducers(allReducer);
export default rootReducer;

+src/store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducer';
import { persistStore, persistReducer, } from 'redux-persist';
import immutableTransform from 'redux-persist-transform-immutable';
import storage from 'redux-persist/lib/storage';
// import autoMergeLevel2Immutable from './automergeLevel2-immutable';

const persistConfig = {
  key: 'root',
  storage,
  // stateReconciler: autoMergeLevel2Immutable,
  transforms: [immutableTransform()] // https://github.com/rt2zz/redux-persist-transform-immutable
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

// https://github.com/zalmoxisus/redux-devtools-extension
const composeEnhancers =
  typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
  // other store enhancers if any
);

let store = createStore(persistedReducer, enhancer);

export const persistor = persistStore(store);
export default store;

Answer 1

1. https://github.com/rt2zz/redux-persist-transform-immutable
2. https://segmentfault.com/q/1010000019280863?_ea=33859610

state顶层不能是immutable类型的数据的

建议使用immer.js代替immutable.js，更轻量，使用起来也更简单方便。只要简单的在reducer里进行修改就可以了