如何用 gatsby 保持 redux 状态？答案

【问题标题】：How to persist redux state with gatsby?如何用 gatsby 保持 redux 状态？
【发布时间】：2021-11-20 09:46:14
【问题描述】：

我通过安装这些包将 redux 与 gatsby 一起使用：

react react-redux gatsby-plugin-react-redux

这是 store.js 文件：

import { createStore } from 'redux';
import { reducer } from './reducer';
export default (preloadedState) => {
    return createStore(reducer, preloadedState);
};

gatsby-config.js

module.exports = {
    plugins: [
        {
            resolve: `gatsby-plugin-react-redux`,
            options: {
                pathToCreateStoreModule: './src/redux/store',
                cleanupOnClient: false
            }
        }
    ]
};

我已经将cleanupOnClient设置为false，但是当我刷新页面时，状态仍然是旧版本，并没有被持久化。

如何使用 gatsby 持久化 redux 状态更改？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

我在 gatsby-plugin-react-redux 中添加了 redux-persist，你可以在这里找到它：

https://www.npmjs.com/package/gatsby-plugin-react-redux-persist

这是第一个版本，但似乎可以工作:)

编辑：

我看到 redux-persist 在使用 preloadedState 时在补液期间超时，我不知道你是否也发生过这种情况，顺便说一句，你可以跳过它：

export default () => {
  const store = createStore(
    persistedReducer,
    {}, // initial state
  );
  const persistor = persistStore(store);
  return { store, persistor };
}

【讨论】：

【解决方案2】：

我喜欢 persist 插件背后的想法，但我发现使用 createStore 组合很容易给其他想要访问 store 的库带来问题。

相反，我将 redux-persist 添加到我现有的 gatsby-plugin-react-redux 设置中：

createStore.js

import { compose, createStore } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import initialState from './initialState'
import rootReducer from './rootReducer'

const persistedReducer = persistReducer({
  key: 'root',
  storage
}, rootReducer);

const composeEnhancers = (typeof window === 'object') ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : undefined

const store = () => {
  return createStore(
    persistedReducer,
    initialState,
    composeEnhancers ? composeEnhancers() : compose
  );
}

gatsby-browser.js 包装器

import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
import createStore from './src/state/createStore'

export const wrapRootElement = ({ element, props }) => {
  const store = createStore()

  const persistor = persistStore(store)

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {element}
      </PersistGate>
    </Provider>
  )
}

【讨论】：