Resetting Redux State with a Root Reducer ( Completely & selectively )

hello guys,

Redux is state management library that is built on 3 principle pillars(store, actions,reducers)

Store: a single javascript object that includes our application state
actions: actions are plain javascript objects what just happened we can relate them with events because in programming event represents what just happened.
reducer: We also have 1 or more reducer each responsible for updating chunk of the store, we can relate reducers as event handlers but essentially they are not.

  In many applications, we use redux to store the data in the central store, whenever data in the store changes/updates then it automatically updates the UI as UI is subscribed to the store.

Now the situation is we want to delete all/some the states from the redux store after some event. For example, whenever the user logs out, we want to clear all the stores.

  Let’s see how our store & reducer looks ,

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../Reducers';
const loggerMiddleware = createLogger();

export const store = createStore(
    rootReducer,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    )
);

import { combineReducers } from 'redux';
import { User } from './user.reducer';
import { Room } from './room.reducer'

const rootReducer = combineReducers({
  User,Room
});

export default rootReducer;

1)Resetting centralized state:

We can reset the entire state of store by resting the state in root reducer.

Initially, we combined all the reducers using combineReducers from the redux library & created the main reducer called rootReducer.but now the situation is, when the user logs out then we directly want to reset the state of rootReducer.

To achieve this we combine all the reducers into a central reducer called MainReducer.

import { combineReducers } from 'redux';
import { User } from './user.reducer';
import { Room } from './room.reducer'

const MainReducer = combineReducers({
  User,Room
});

Now instead of passing MainReducer to createStore as an argument, we pass our rootReducer function.rootReducer function checks for the user action, if the action is user log out then rootReducer will reset the state to undefined & return the MainReducer as shown below,

import { combineReducers } from 'redux';
import { UserActionTypes } from '../Actions/ActionTypes';
import { User } from './user.reducer';
import { Room } from './room.reducer'

const MainReducer = combineReducers({
  User,Room
});

const rootReducer = (state, action) => {
  if (action.type === UserActionTypes.LOGOUT) {
    console.log('user logging out');
    state = undefined
  }
  return MainReducer(state, action);
}
export default rootReducer;

Now let’s see how can we reset the store from UI.

Here we have created logOut action Creator which returns an action of type logout which then dispatched to the store.In the rootReducer dispatched action is checked if it’s a user logout then state is set to undefined.

export const UserActionTypes = {
    LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS',
    LOGOUT: 'USERS_LOGOUT',
};

export function login(user) { 
    return { type: UserActionTypes.LOGIN_SUCCESS, user } 
}

export function logout() { 
    return { type: UserActionTypes.LOGOUT } 
}

import { logout } from './redux/Actions/user.actions';
import {useSelector,useDispatch} from 'react-redux'

export default Logout(){
  const dispatch = useDispatch();

function handleLogout(){
  dispatch(logout()); 
} 
return ( 
   <div>
    <button onClick={handleLogout}>Logout</button>
   </div>
)
}

2)Excluding reducers from Reset:

There are situations where we don’t want to reset all the states from the store. Instead of resetting all the states from the store, if the user want to persist some states even the user log’s out then we can achieve it using state destructing as shown below,

import { combineReducers } from 'redux';
import { UserActionTypes } from '../Actions/ActionTypes';
import { User } from './user.reducer';
import { Room } from './room.reducer'

const MainReducer = combineReducers({
  User,Room
});

const rootReducer = (state, action) => {
  if (action.type === UserActionTypes.LOGOUT) {
    console.log('user logging out');
     const {User,Room} = state;
    state = {Room}
  }
  return MainReducer(state, action);
}
export default rootReducer;

Summary:

In short using rootReducers we can reset the entire store, we either reset all the states, or selectively we can select child reducers that can persist.

Thank You,