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

【问题标题】：How to get localStorage before rendering reactjs components in universal app?如何在通用应用程序中渲染 reactjs 组件之前获取 localStorage？
【发布时间】：2015-12-05 04:41:27
【问题描述】：

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

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

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

我也想知道是否有办法在服务器端请求客户端的localStorage？

【问题讨论】：

标签： node.js local-storage react-router redux

【解决方案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 动作创建器中有任何异步代码，您需要等待它完成才能渲染。

【讨论】：

我还要注意，目前没有办法在服务器上获取localStorage 信息。