React SSR环境使用redux-persist报failed to create sync storage错误问询

问题原因 #

• redux-persist 默认引入的redux-persist/lib/storage是浏览器端的localStorage实现，Node.js服务端环境不存在localStorage API，服务端初始化store时无法创建存储实例，因此抛出该警告，降级到无操作的noop存储。
• 你当前的store代码在服务端和客户端复用了同一套逻辑，没有区分环境适配不同的存储方案，同时服务端也不需要执行持久化逻辑，持久化只需要在客户端执行即可。

可行解决方案 #

步骤1：修改存储配置，适配SSR环境 #

修改store.js文件，判断运行环境，服务端使用noop存储，客户端使用正常的localStorage：

// 把原来的 import storage from 'redux-persist/lib/storage' 替换成以下逻辑
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();

步骤2：移除服务端的PersistGate配置 #

服务端不需要持久化还原逻辑，删除server.js中PersistGate相关的代码，避免服务端执行不必要的持久化逻辑：
修改server.js中的渲染逻辑：

${ReactDOMServer.renderToString(
  <Provider store={store}>
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  </Provider>
)}

同时删除server.js中persistor的导入和引用。

步骤3：可选优化：服务端不要复用客户端的store单例 #

当前代码中服务端直接复用了客户端导出的store单例，会导致多用户请求时store状态共享的问题，建议把store的创建封装成工厂函数，每次服务端请求都生成新的store实例：
修改store.js，把store创建逻辑改成函数导出：

// 替换原来的store、persistor导出逻辑
export const createReduxStore = () => {
  const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(...middleware)))
  const persistor = persistStore(store)
  return { store, persistor }
}

客户端index.js调用时创建实例：

const { store, persistor } = createReduxStore()

服务端server.js每次请求时都调用createReduxStore()生成新的store实例，避免状态污染。

内容的提问来源于stack exchange，提问作者shanksu 218