最近,我在现有的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);
});
}
任何在服务器端实现持久化的帮助或解决方案将不胜感激。