• 5
  • 新人请关照

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

  • 报错信息

QQ截图20191127150149.png

  • 问题仓库重现链接,

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;
阅读 401
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒