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

Question

我最近在 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 无法创建同步存储。回退到内存存储。TypeError：baseReducer 不是函数”

Answer 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;

转到store.jsNextjs 示例中创建的文件。更换 import storage from 'redux-persist/lib/storage'用import storage from './storage'导入您所创建，而不是文件。