如何使用 thunk、中间件和不可变 JS 设置 redux-persist？答案

【问题标题】：How to set up redux-persist with thunk, middleware and immutable JS?如何使用 thunk、中间件和不可变 JS 设置 redux-persist？
【发布时间】：2018-06-18 04:38:13
【问题描述】：

我正在尝试让 redux-persist 正常工作，但无法按照我的应用当前设置的方式来解决。

/**
 * Create the store with dynamic reducers
 */

import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import thunk from 'redux-thunk';
import createReducer from './reducers';

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(initialState = {}, history) {
    // Create the store with two middlewares
    // 1. sagaMiddleware: Makes redux-sagas work
    // 2. routerMiddleware: Syncs the location/URL path to the state
    const middlewares = [
        sagaMiddleware,
        thunk,
        routerMiddleware(history),
    ];

    const enhancers = [
        applyMiddleware(...middlewares),
    ];

    // If Redux DevTools Extension is installed use it, otherwise use Redux compose
    /* eslint-disable no-underscore-dangle */
    const composeEnhancers =
        process.env.NODE_ENV !== 'production' &&
        typeof window === 'object' &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
            // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
            // Prevent recomputing reducers for `replaceReducer`
            shouldHotReload: false,
        })
        : compose;
    /* eslint-enable */

    const store = createStore(
        createReducer(),
        fromJS(initialState),
        composeEnhancers(...enhancers)
    );

    // Extensions
    store.runSaga = sagaMiddleware.run;
    store.injectedReducers = {}; // Reducer registry
    store.injectedSagas = {}; // Saga registry

    // Make reducers hot reloadable, see http://mxs.is/googmo
    /* istanbul ignore next */
    if (module.hot) {
        module.hot.accept('./reducers', () => {
        store.replaceReducer(createReducer(store.injectedReducers));
        });
    }

    return store;
}

我应该在哪里添加redux-persist 以使其连接到商店并保存到本地存储？

我尝试了很多不同的方法，全都错了，错误范围很广。所以没有必要把它们都贴出来。

提前感谢您的帮助:)

【问题讨论】：

标签： reactjs redux local-storage redux-persist

【解决方案1】：

我不确定这是否有用，因为我使用的是 redux-thunk 和 redux-localstorage（而不是 redux-persist），但这对我有用：

import { createStore, compose, applyMiddleware } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import persistState from 'redux-localstorage';

const enhancer = compose(
  applyMiddleware(thunk),
  persistState(/*paths, config*/)
);

export default function configureStore() {
  return createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
    enhancer
  );
}

【讨论】：