Question

当用户登录 React 应用程序时，我将数据填充到 authState 对象。在应用程序中，我用数据填充其他状态对象。我想在用户注销时清除所有这些状态

例如我有这个提供者

import { createContext, useEffect, useReducer } from "react";
import auth from "./reducers/auth";
import pendiente from "./reducers/pendiente";
import historico from "./reducers/historico";
import authInitialState from "./initialStates/authInitialState";
import pendienteInitialState from "./initialStates/pendienteInitialState";
import historicoInitialState from "./initialStates/historicoInitialState";

export const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  const [authState, authDispatch] = useReducer(auth, [], () => {
    const localData = localStorage.auth;
    return localData ? JSON.parse(localData): authInitialState;
  });
  const [pendienteState, pendienteDispatch] = useReducer(
    pendiente,
    pendienteInitialState
  );
  const [historicoState, historicoDispatch] = useReducer(
    historico,
    historicoInitialState
  );

  useEffect(() => {
    localStorage.auth = JSON.stringify(authState);
  }, [authState]);

  return (
    <GlobalContext.Provider
      value={{
        authState,
        authDispatch,
        pendienteState,
        pendienteDispatch,
        historicoState,
        historicoDispatch,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
};

在注销功能中，我发送和操作（注销）有 3 次调度。

const {
    authState,
    authDispatch,
    pendienteDispatch,
    historicoDispatch,
  } = useContext(GlobalContext);

  const handleLogout = () => {
    logout(history)(authDispatch, pendienteDispatch, historicoDispatch);
  };

在动作内部，我向每个状态对象发送一个 dispatch an 来清除数据的初始状态这工作正常，但我认为这不是正确的方法

const logout = (history) => (
  dispatch,
  pendienteDispatch,
  historicoDispatch
) => {
  localStorage.removeItem("token");

  dispatch({ type: LOGOUT_USER });
  pendienteDispatch({ type: CLEAR_PENDIENTE_DATA });
  historicoDispatch({ type: CLEAR_HISTORICO_DATA });

  history.push("/");
};

¿有什么想法吗？

注销反应应用程序时清除/删除所有状态

0 个答案: