React/Redux 在哪里设置 sessionStorage

Posted 2023-02-27

【中文标题】React/Redux 在哪里设置 sessionStorage

【英文标题】：React/Redux where to set sessionStorage

【发布时间】：2018-06-19 02:56:47

【问题描述】：

我正在开发我的第一个 react/redux 应用程序，但我不确定应该在哪里调用 sessionStorage.setItem()。我目前正在从 loginUserSuccess() 操作存储用户凭据，但我不确定这是我应该这样做的地方。此外，我正在使用 fetch 发出请求，并希望将用户的 authToken 添加到所有请求中。我正在研究fetch-intercept，但没有提供太多用于修改标头的文档。

actions/loginActions.js

export function loginUser(user) 
  return function(dispatch) 
    return LoginApi.login(user).then(creds => 
      dispatch(loginUserSuccess(creds));
    ).catch(error => 
      throw(error);
    );
  ;


export function loginUserSuccess(creds) 
  sessionStorage.setItem('credentials', JSON.stringify(creds));
  return 
    type: types.LOGIN_USER_SUCCESS,
    state: creds
  

api/packageApi.js

class PackageApi 
  // called on successful login
  static getAllPackages() 
    const request = new Request('/my/endpoint', 
      method: 'GET',
      headers: new Headers(
        'AUTHORIZATION': `Bearer $JSON.parse(sessionStorage.credentials).authToken`
      )
    );
    return fetch(request).then(response => 
      return response.json();
    ).catch(error => 
      return error;
    );
  


export default PackageApi;

【问题讨论】：

Where to write to localStorage in a Redux app?的可能重复

【参考方案1】：

考虑到 Dan Abramov 的解释，我们有以下几点：

store/sessionStorage.js

export const loadState = () => 
  try 
    const serializedState = sessionStorage.getItem('state');

    if (serializedState === null) 
      return undefined;
    

    return JSON.parse(serializedState);
   catch (error) 
    return undefined;
  
;

export const saveState = (state) => 
  try 
    const serializedState = JSON.stringify(state);
    sessionStorage.setItem('state', serializedState);
   catch (error) 
    // Ignore write errors.
  
;

store/index.js

import  createStore  from 'redux';
import rootReducer from '../reducers';
import  loadState, saveState  from './sessionStorage';

const persistedState = loadState();
const store = createStore(rootReducer, persistedState);

store.subscribe(() => 
  saveState(store.getState());
);

完整解释：https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

【参考方案2】：

将sessionStorage 视为另外一家商店。这个商店需要与 Redux 同步，这样才能正常工作。我认为减速机是正确的地方。那是您进行数据更改和数据初始化的地方。