如何在通用應用中呈現reactjs組件之前獲取localStorage？

Question

我在客戶端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行動的創建者，你會再需要等待它完成，然後才能提供任何異步代碼。