如何在 Next.js 中持久化 redux 状态数据？答案

【问题标题】：How to persist redux state data in Next.js?如何在 Next.js 中持久化 redux 状态数据？
【发布时间】：2019-05-30 21:09:33
【问题描述】：

我最近用我的 Next.js 项目设置了 redux，现在我正在处理持久化 redux 数据，这样在每次页面刷新时，我都可以拥有持久化状态。所以我添加了 redux-persist 来处理这种情况，因为它是 react-redux 的最佳解决方案，但我不知道为什么它在 next.js 中也不能使用 next-redux-wrapper 或 withRedux 库。所以请帮我解决这个问题，是否存在类似 redux-persist 的东西？（虽然我不想要 cookie 的解决方案），如果是，那么请建议我参考示例，这将非常有帮助。提前谢谢...

我实际上是在尝试在每次页面刷新后保持 redux 状态，所以我也将 redux-persist 与 next-redux-wrapper 一起使用，但我遇到了错误

/store.js

    import { createStore, applyMiddleware } from 'redux'
    import { composeWithDevTools } from 'redux-devtools-extension'
    import thunkMiddleware from 'redux-thunk'
    import { persistReducer } from 'redux-persist';
    import storage from 'redux-persist/lib/storage';

    const persistConfig = {
      timeout: 0,
      key: 'root',
      storage,
    };
    const persistedReducer = persistReducer(persistConfig, reducer);

    export default () => {
      return createStore(persistedReducer,
        composeWithDevTools(
          applyMiddleware(
            thunkMiddleware
          )
        ));
    };

/_app.js

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

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

      render () {
        const { Component, pageProps, reduxStore } = this.props;
        const persistor = persistStore(store);
        return (
          <Container>
            <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Component {...pageProps} />
              </PersistGate>
            </Provider>
          </Container>
        )
      }
    }

我希望它会保持状态，但我收到这样的错误：“redux-persist failed to create sync storage.fall back to memory storage.TypeError: baseReducer is not a function”

【问题讨论】：

你为什么不按照next.js github推荐的例子。 github.com/zeit/next.js/tree/canary/examples/with-redux你应该用redux-persist导出你的_app类
我遵循了 zeit 在他们的文档中提供的相同示例，但我无法获得解决方案。顺便说一句，我不知道如何用 redux-persist man 导出 _app 类，你能帮我看看吗，我可以试试..

标签： reactjs redux react-redux next.js

【解决方案1】：

创建一个您自己的storage.js 文件。将文件放在主项目文件夹中。使用此代码...

import createWebStorage from "redux-persist/lib/storage/createWebStorage";

const createNoopStorage = () => {
  return {
    getItem(_key) {
      return Promise.resolve(null);
    },
    setItem(_key, value) {
      return Promise.resolve(value);
    },
    removeItem(_key) {
      return Promise.resolve();
    },
  };
};

const storage = typeof window !== "undefined" ? createWebStorage("local") : createNoopStorage();

export default storage;

转到在 Nextjs 示例中创建的 store.js 文件。将 import storage from 'redux-persist/lib/storage' 替换为 import storage from './storage' 以导入您创建的文件。

【讨论】：

【解决方案2】：

我在这里看不到你的减速机，但我猜你没有处理补水案例。为了在页面刷新时保持状态，您的减速器应该处理 REHYDRATE 情况。这是我的代码中的一个示例：

const Account = (state= INIT_STATE, action) => {
    switch (action.type) {
    /// other cases here....
    case REHYDRATE:
        const rehydrated = (action && action.payload && action.payload.Account) || {}
        return { ...state, ...rehydrated }
    default: return { ...state };

【讨论】：