使用react js中的本地存储创建会话

import React, { useState, useEffect } from 'react';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// 创建会话状态的初始值
const initialSessionState = {
  user: null,
  token: null,
};

// 创建会话状态的reducer
const sessionReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        user: action.payload.user,
        token: action.payload.token,
      };
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        token: null,
      };
    default:
      return state;
  }
};

// 创建本地存储配置
const persistConfig = {
  key: 'session',
  storage,
};

// 创建持久化的会话reducer
const persistedSessionReducer = persistReducer(persistConfig, sessionReducer);

// 创建会话组件
const SessionProvider = ({ children }) => {
  const [sessionState, setSessionState] = useState(initialSessionState);

  // 从本地存储中恢复会话状态
  useEffect(() => {
    persistStore(store, null, () => {
      const persistedSession = store.getState().session;
      setSessionState(persistedSession);
    });
  }, []);

  // 更新会话状态并存储到本地存储中
  const updateSessionState = (action) => {
    const newSessionState = persistedSessionReducer(sessionState, action);
    setSessionState(newSessionState);
    store.dispatch(action);
  };

  return (
    <SessionContext.Provider
      value={{
        sessionState,
        updateSessionState,
      }}
    >
      {children}
    </SessionContext.Provider>
  );
};

// 在需要使用会话的组件中，引入会话上下文并使用会话状态
const MyComponent = () => {
  const { sessionState, updateSessionState } = useContext(SessionContext);

  const handleLogin = () => {
    // 模拟登录操作
    const user = { name: 'John Doe' };
    const token = 'abc123';
    const loginAction = { type: 'LOGIN', payload: { user, token } };
    updateSessionState(loginAction);
  };

  const handleLogout = () => {
    // 模拟注销操作
    const logoutAction = { type: 'LOGOUT' };
    updateSessionState(logoutAction);
  };

  return (
    <div>
      {sessionState.user ? (
        <div>
          <p>Welcome, {sessionState.user.name}!</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please login.</p>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
};