Search code examples
reactjsredux-toolkit

How to rest redux-tool-kit multi states at once?


I have multi initial states like following, the real life example is way bigger but I don't want to over complicate things here, and I want to return all of those sates to default after logging the user out of react app since not resting those states are causing all sorts of bugs if the user relogs ... should I create a special rest function and rest each state separately meaning calling 3 rest separate functions for each state , or is there something that is integrated in to redux tool kit that might be better of a practice to implement ?

my current store config looks like the following

import { configureStore } from '@reduxjs/toolkit';
import stateAReducer from './aSlice';
import stateBReducer from './bSlice';
import stateCReducer from './cSlice';

export const store = configureStore({
  reducer: {
    a: stateAReducer,
    b: stateBReducer,
    c: stateCReducer,
  },
});
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

// Slice A 

const initialState: aState = {
  data1: { name: '', title: '', customColor: '' },
  data2: { linkA: '', linkB: '' },
  img: null,
  online: false,
};

// Slice B 
const initialState: bState = {
  obj1 : {}
  obj2 : {}
  arr : []
};


// Slice C 
const initialState: cState = {
   x : false
   z : true
   f : true
};

current solution ?

 reducers: {
    restAState: (state, action: PayloadAction<>) => {
      state = initialState
    },


Solution

  • I assume that your current reducer will look like this

    import { configureStore } from '@reduxjs/toolkit';
    import counterReducer from '../features/counter/counterSlice';
    
    export default configureStore({
      reducer: {
        counter: counterReducer,
        // ... more reducers
      },
    });
    

    So instead of this approach we can make use of combinereducers

    const combinedReducer = combineReducers({
      counter: counterReducer,
      // ... more reducers
    });
    

    Followed by

    const rootReducer = (state, action) => {
      if (action.type === 'counter/logout') { // check for action type 
        state = undefined;
      }
      return combinedReducer(state, action);
    };
    
    export default configureStore({
      reducer: rootReducer,
      middleware: [...getDefaultMiddleware()]
    });
    

    Here is my working example where you can see that the inital value gets back to default . You can add as many reducers as you want and all will return to default initial value based on a single action.