1

When a user log to a react app, I fill data to authState object. Inside the app I fill other state objects with data. I want to clear all those states when the user logout

for example I have this provider

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>
  );
};

In Logout function I'm sending and action (logout) with 3 dispatchs.

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

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

Inside the action I send a dispatch an to every sate objcet to clear the data with it's initial state This works fine, but I think this is not the correct way to do it

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("/");
};

¿Any ideas ?

  • Does this answer your question? [How to reset the state of a Redux store?](https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store) – jmargolisvt Apr 19 '21 at 01:39
  • I will check. But I'm not using Redux. Perhaps I can take some ideas from that link. – CapitanSigfrido Apr 20 '21 at 14:42

0 Answers0