以Next.js为例说明Redux的持久性（附代码）

下面的实现是我作为一个软件开发者的日常工作中的一个快速摘录。如果我遇到一个问题，并得出一个我认为值得分享的例子，我将把代码的要点放在这个网站上。它可能对其他偶然遇到相同任务的人有用。

下面的实现通过一个快速的例子告诉你如何将Redux Persist整合到Next.js中。首先，在命令行上安装该库：

npm install redux-persist

其次，我们没有一个直接的函数来创建我们的Redux存储，而是区分了服务器端和客户端的Redux存储。在创建客户端Redux商店的情况下，我们添加了一个实现，以便在浏览器会话之间持久化我们的商店--默认是在本地存储中：

import { createStore, applyMiddleware } from 'redux';

import createSagaMiddleware from 'redux-saga';
import { persistStore } from 'redux-persist';

import rootSaga from './saga';
import rootReducer from './reducer';

export default (initialState) => {
  let store;

  const sagaMiddleware = createSagaMiddleware();

  const isClient = typeof window !== 'undefined';

  if (isClient) {
    const { persistReducer } = require('redux-persist');
    const storage = require('redux-persist/lib/storage').default;

    const persistConfig = {
      key: 'root',
      storage
    };

    store = createStore(
      persistReducer(persistConfig, rootReducer),
      initialState,
      applyMiddleware(sagaMiddleware)
    );

     store.__PERSISTOR = persistStore(store);
  } else {
    store = createStore(
      rootReducer,
      initialState,
      applyMiddleware(sagaMiddleware)
    );
  }

  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

最后但并非最不重要的是，在我们的src/pages/_app.js文件中--它定义了我们的Next.js根组件--我们为持久化Redux商店添加了额外的代码。

import React from 'react';
import { Provider } from 'react-redux';
import App from 'next/app';
import withRedux from 'next-redux-wrapper';
import { PersistGate } from 'redux-persist/integration/react';

import reduxStore from './store';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};

    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Provider store={store}>
        <PersistGate persistor={store.__PERSISTOR} loading={null}>
          <Component {...pageProps} />
        </PersistGate>
      </Provider>
    );
  }
}

export default withRedux(reduxStore)(MyApp);

这就是了。自己试试吧，向Redux商店添加一些东西，刷新或重新加载浏览器，并在浏览器的开发工具中检查本地存储。你应该有Redux商店的状态在里面。在连接到Redux商店的React组件中，你可以检索状态。