redux结合immutable.js和redux-persist报错

clipboard.png

store.js

import { createStore, compose, applyMiddleware } from "redux";
import { routerMiddleware } from "connected-react-router/immutable";
import { createMigrate, persistStore, persistReducer } from "redux-persist";
import createEncryptor from "redux-persist-transform-encrypt";
import immutableTransform from "redux-persist-transform-immutable";
import storage from "redux-persist/es/storage";
import createSagaMiddleware from "redux-saga";
import logger from "redux-logger";
import { createBrowserHistory } from "history";
import createRootReducer from "../reducers";
import rootSaga from "../sagas";
import config from "../../config/base.conf";
import { authTokenMiddleware } from "../middleware/authTokenMiddleware";

export const history = createBrowserHistory();
// create the router history middleware
const historyRouterMiddleware = routerMiddleware(history);
// create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// 组合middleware
const middleWares = [sagaMiddleware, historyRouterMiddleware, logger, authTokenMiddleware];

const migrations = {
  0: state => {
    return {
      ...state,
      device: undefined
    };
  },
  2: state => {
    return {
      device: state.device
    };
  }
};

const encryptor = createEncryptor({
  secretKey: "hiynn",
  onError: function(error) {}
});

const persistConfig = {
  transforms: [encryptor, immutableTransform()],
  key: config.persist,
  storage,
  version: 2,
  migrate: createMigrate(migrations, { debug: false })
};

const finalReducer = persistReducer(persistConfig, createRootReducer(history));

export default function configureStore(preloadedState) {
  const store = createStore(finalReducer, preloadedState, compose(applyMiddleware(...middleWares)));
  let persistor = persistStore(store);
  sagaMiddleware.run(rootSaga);
  return { persistor, store };
}

reducer.js

// import { combineReducers } from "redux";
import { combineReducers } from "redux-immutable";
import { connectRouter, LOCATION_CHANGE } from "connected-react-router/immutable";
import layoutPageReducer from "./layoutPageReducer";
import authReducer from "./authReducer";

export default history =>
  combineReducers({
    router: connectRouter(history),
    layoutPageReducer,
    authReducer
  });

authReducer.js

import { handleActions } from "redux-actions";
import { authTypes } from "../actions/authAction";
import moment from "moment";
import { Map } from "immutable";

const initState = Map({
  user: null,
  token: ""
});

const authReducer = handleActions(
  {
    [authTypes.AUTH_SUCCESS]: (state, action) => {
      return state.set("user", action.data.user).set("token").action.data.token;
    },
    [authTypes.SIGN_OUT]: (state, action) => {
      return state.set("user", null).set("token", "");
    }
  },
  initState
);

export default authReducer;
阅读 1.6k
评论
    1 个回答
    • 2.4k

    解决了,参考

    import { createStore, compose, applyMiddleware } from "redux";
    import { routerMiddleware } from "connected-react-router/immutable";
    import { createMigrate, persistStore, persistReducer } from "redux-persist";
    import createEncryptor from "redux-persist-transform-encrypt";
    import immutableTransform from "redux-persist-transform-immutable";
    import storage from "redux-persist/es/storage";
    import createSagaMiddleware from "redux-saga";
    import { createLogger } from "redux-logger";
    import { createBrowserHistory } from "history";
    import createRootReducer from "../reducers";
    import rootSaga from "../sagas";
    import config from "../../config/base.conf";
    import { authTokenMiddleware } from "../middleware/authTokenMiddleware";
    
    export const history = createBrowserHistory();
    // create the router history middleware
    const historyRouterMiddleware = routerMiddleware(history);
    // create the saga middleware
    const sagaMiddleware = createSagaMiddleware();
    // create the logo middleware
    const loggerMiddleware = createLogger({
      predicate: () => process.env.NODE_ENV === "development"
    });
    // 组合middleware
    const middleWares = [sagaMiddleware, historyRouterMiddleware, loggerMiddleware, authTokenMiddleware];
    
    const migrations = {
      0: state => {
        return {
          ...state,
          device: undefined
        };
      },
      2: state => {
        return {
          device: state.device
        };
      }
    };
    
    const encryptor = createEncryptor({
      secretKey: "hiynn",
      onError: function(error) {}
    });
    
    const persistConfig = {
      transforms: [
        immutableTransform()
        // encryptor
      ],
      key: config.persist,
      storage,
      version: 2,
      migrate: createMigrate(migrations, { debug: false })
    };
    
    const finalReducer = persistReducer(persistConfig, createRootReducer(history));
    
    export default function configureStore(preloadedState) {
      const store = createStore(finalReducer, preloadedState, compose(applyMiddleware(...middleWares)));
      let persistor = persistStore(store);
      sagaMiddleware.run(rootSaga);
      return { persistor, store };
    }
    
    import { combineReducers } from "redux";
    import { connectRouter, LOCATION_CHANGE } from "connected-react-router/immutable";
    import layoutPageReducer from "./layoutPageReducer";
    import authReducer from "./authReducer";
    import indexReducer from "./indexReducer";
    import indexMapReducer from "./indexMapReducer";
    
    export default history =>
      combineReducers({
        router: connectRouter(history),
        layoutPageReducer,
        authReducer,
        indexReducer,
        indexMapReducer
      });
    
      撰写回答

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

      相似问题
      推荐文章