Я экспериментировал с SSR с React / Redux и следовал руководству на сайте Redux .Но я не могу передать свое состояние от сервера клиенту через окно.На клиенте моя переменная возвращается как неопределенная.Я не смог найти способ отладить это.
Я также использую машинопись для разработки, но собираюсь в JavaScript (не уверен, что это доставит мне неприятности)
Код сервера
app.get("/reactComponent", function (req, res) {
var hardCodedState = { person: [{ firstName: "John", lastName: "Doe" }]};
const store = createStore(appReducer, hardCodedState);
const body = renderToString(
<Provider store={store}>
<Data />
</Provider>
);
const preloadedState = store.getState();
res.send(renderHTML(body, preloadedState));
});
function renderHTML(html, preloadedState) {
return `<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__REDUX_STATE__ = ${JSON.stringify(preloadedState).replace(/</g,'\\u003c')}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>`
}
Клиентская сторона
public componentDidMount(){
axios.get("http://localhost/reactComponent").then(response => {
const preloadedState = (window as any).__REDUX_STATE__;
// delete (window as any).__REDUX_STATE__;
const store = createStore(appReducer,preloadedState);
hydrate(<Provider store={store}><Data /></Provider>, document.getElementById("content"));
}).catch(error =>{
console.log("error",error);
});
}
const preloadedState = (window as any).__REDUX_STATE__; всегда возвращается как неопределенное, поэтому мой компонент никогда не отрисовывает на клиенте несоответствующие результаты по гидратам.
Все, что я могу попробоватьили можно предпринять шаги для отладки передачи с сервера на клиент?