redux-persist在React通用应用程序的服务器端渲染中不起作用

时间:2019-12-10 10:03:23

标签: reactjs redux server-side-rendering redux-persist

最近,我在现有的react应用中实现了服务器端渲染,并且持久性在服务器端不起作用,并且页面刷新时服务器端的存储空间为空。坚持与客户方合作正常。

我要讲的是代码,只需看一下即可:

const encryptor = createEncryptor({
  secretKey: key
});
const persisted_state = undefined; //loadState()
const persistConfig = {
  key: "root",
  storage: storage,
  transforms: [encryptor],
  stateReconciler: autoMergeLevel2 // see "Merge Process" section for details.
};
const pReducer = persistReducer(persistConfig, reducer);
// console.log("REDUCERS",reducer)
const app = createReactAppExpress({
  clientBuildPath,
  universalRender: handleUniversalRender,
  onFinish(req, res, html) {
    const { helmet } = helmetCtx;
    const helmetTitle = helmet.title.toString();
    const helmetMeta = helmet.meta.toString();
    const newHtml = html
      .replace('{{HELMET_TITLE}}', helmetTitle)
      .replace('{{HELMET_META}}', helmetMeta);
    res.send(newHtml);
  },
  onEndReplace(html) {
    const state = store.getState();

    return html.replace(
      '{{SCRIPT}}',
      `${tag}<script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(state).replace(
        /</g,
        '\\u003c'
      )};
      window.__INITIAL_DATA__ = ${JSON.stringify(serverData).replace(
        /</g,
        '\\u003c'
      )};
    </script>`
    );
  }
});

function handleUniversalRender(req, res) {
  const context = {};
  helmetCtx = {};
  const pReducer = persistReducer(persistConfig, reducer);
  store = createStore(pReducer,persisted_state, applyMiddleware(thunk));
  const persistor = persistStore(store);

  return getInitialData(req, res,routes)
  .then(data => {
      serverData = data;
      const app = (
        <HelmetProvider context={helmetCtx}>
          <StaticRouter location={req.url} context={context}>
            <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <AppClass routes={routes} initialData={data} store={store}/>
              </PersistGate>
            </Provider>
          </StaticRouter>
        </HelmetProvider>
      );
      return app;
    })
    .catch(err => {
      console.error(err);
      res.send(500);
    });
}

任何在服务器端实现持久化的帮助或解决方案将不胜感激。

0 个答案:

没有答案