redux-persist：如何在浏览器的本地存储上保存状态？

Question

我正在学习 redux 并想知道如何在本地保存状态，以便在对状态进行一些更改后刷新时保持状态。我开始了解 redux-persist 并看到了描述如何使用它的 github 文档，但对我来说不是很清楚。

这是我的应用程序的 index.js 代码 -

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('#container'));

我怎样才能实现它？

Answer 1

//In your createStore have this code    
import { applyMiddleware, compose, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducers';
import { persistReducer } from 'redux-persist'
import localForage from 'localforage';
const loggerMiddleware = createLogger();

export default (initialState = {}) => {
  // ======================================================
  // Middleware Configuration
  // ======================================================
  const middleware = [thunkMiddleware, loggerMiddleware]

  // ======================================================
  // Store Enhancers
  // ======================================================



  const enhancers = []
  const __DEV__ = process.env.NODE_ENV !== 'production';
  if (__DEV__) {
    const devToolsExtension = window.devToolsExtension
    if (typeof devToolsExtension === 'function') {
      enhancers.push(devToolsExtension())
    }
  }

  // ======================================================
  // Store Instantiation and HMR Setup
  // ======================================================
  let config = {
    key: 'root',
    storage: localForage,
    whitelist: ['user'],
    debug: __DEV__
  }
  let configureReducer = persistReducer(config, rootReducer)
  const store = createStore(
    configureReducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      ...enhancers
    ),
  )

  return store
}


// In your App.js or root app, do this in your componentDidMount

persistStore(
      store,
      undefined,
      () => {
        console.log('callback::')
      }
    )