如何在通用应用程序中渲染 reactjs 组件之前获取 localStorage？

Question

我将 "some" 用户的会话数据存储在客户端的 localStorage 中，我需要在服务器渲染之后和加载 reactjs 应用程序之前获取此数据，以便我可以检查用户会话是否是有效的。如果用户会话有效，我会用用户数据更新 redux 存储；否则，我保持原样。

我正在使用 react-router 的 onEnter 钩子来检查用户的会话是否有效。问题是我正在请求保存在服务器端 localStorage 中的数据（我知道它不可用）。

因此，我需要一种方法在服务器呈现后检查 localStorage 并为 onEnter 挂钩做好准备。

我也想知道有没有办法在服务器端请求客户端的localStorage?

Answer 1

您需要在 client.js 文件中理清 createStore 和 render() 之间的逻辑。

import {createStore} from 'redux';
const store = createStore();

if(localStorage.get('token')) {
    store.dispatch(authenticate(localStorage.get('token')));
}

render(
    <Provider store={store}><App/></Provider>,
    document.getElementById('js-react')
);

请记住，如果 authenticate 动作创建器中有任何异步代码，您需要等待它完成才能呈现。

如何在通用应用程序中渲染 reactjs 组件之前获取 localStorage？

How to get localStorage before rendering reactjs components in universal app?

local-storage

node.js

react-router

redux