How to reset the state of a Redux store

Today we’ll show you how to reset the state of a Redux store in React JS. Sometimes you might need to reset the whole store based on the given action type.

Resetting Redux State with a Root Reducer, Reset to initial data in redux store, Reset all reducers back to their initial states when user logout, How to reset redux store?, clear redux state on logout, redux persist clear store on logout, redux clear state on unmount.

Why do we need it?

Let’s assume that you are working on a react application which contains the authentication where you have to get user data so you can keep it in the Redux store. So now on logout, you need to reset the store or remove the user data from redux store for that you need to perform this action to reset the state of a redux store.

Steps to reset the state of a redux store

  1. Implement redux store in ReactJS
  2. Update store to reset state
  3. Update component to reset the store
  4. Output

1. Implement redux store in ReactJS

In order to show you the example, you have to implement redux store in ReactJS. If you don’t know how to implement it then refer to the link below.

API call in React with Redux using redux-thunk

We’ll recommend you to check above article before starting this.

2. Update store to reset state

First, update the action types for the reset store. For that you have to define the key in the actionTypes.js file.

actions/actionTypes.js

To reset the state, you have to slightly update the code of the reducer file.

reducers/index.js

We have to create an action in userActions.js to reset the state.

actions/userActions.js

3. Update component to reset the store

Now, we are going to update the Content component where we’ll show you the whole store in JSON format. Also, add one more button to reset the store so on click of it we’ll perform the reset action.

pages/Content.js

4. Output

Run the project and check the output.

Output - How to reset the state of a Redux store - Clue Mediator
Output – How to reset the state of a Redux store – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *