Photo by No Revisions on Unsplash

Redux Store

How to Reset Redux Store?

In Agile methodology, the team develops and change application every day. Sometimes the impact of changes affects the structure of the application Redux store and causes conflict with current persisting data and new app code. Then the app will crash.

How can we prevent this kind of crash?

1. Maybe we can merge two different structures into a standard format.

Redux-Persist \ State Reconciler

But sometimes, it is not enough because the data structure has changed too much to merge.

2. You must reset redux-store when a new application version is deployed. But How?

Redux Store in Memory, and using Redux-Persiser also persists to LocalStorage. Therefore, we must set up a mechanism that clears all Memory and LocalStorage.

First of all, we must define an indicator that triggers precise operations. The package version in package.json is an excellent place to store the changes.

React App package.json version changed

In React App .env variable create-react-app support $npm_package_version in .env file. So you can access in-app process.env.REACT_APP_VERSION. So we can store NPM Package version in LocalStorage

https://create-react-app.dev/docs/adding-custom-environment-variables/

and every routing app checks if there is any change in version and triggers the CLEAR_REDUX_STORE action.. (1)

Then in the Store combineReducer part, we check the action and make two things.

• Clearing Local storage → localStorage.removeItem(‘persist:root’);
• Reset state with sending state undefined App(undefined, action)

Let’s continue reading 😃

You can find similar samples and writings at this link if you like this story, please 👏👏 and share.