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;

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

Answer 2

为什么不遵循next.js github中的推荐示例。

https://github.com/zeit/next.js/tree/canary/examples/with-redux

您应使用redux-persist

导出_app类

Answer 3

我目前正在使用React开发一个服务器端渲染的应用程序，并在下一个js中使用redux-persist并发现了这个不错的入门者！您绝对应该检查一下https://github.com/zeit/next.js/tree/canary/examples/with-redux-persist

Answer 4

我在这里看不到您的减速器，但我想您没有处理补水箱。为了保持页面刷新状态，您的reducer应该处理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 };

如何在Next.js中持久保存Redux状态数据？

4 个答案: