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

Question

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;

Answer 1

解决了，参考

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
  });