How to reset the state of a Redux store?

by

One way to do that would be to write a root reducer in your application.

The root reducer would normally delegate handling the action to the reducer generated by combineReducers(). However, whenever it receives USER_LOGOUT action, it returns the initial state all over again.

For example, if your root reducer looked like this:

const rootReducer = combineReducers({
  /* your app’s top-level reducers */
})

You can rename it to appReducer and write a new rootReducer delegating to it:

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  return appReducer(state, action)
}

Now we just need to teach the new rootReducer to return the initial state in response to the USER_LOGOUT action. As we know, reducers are supposed to return the initial state when they are called with undefined as the first argument, no matter the action. Let’s use this fact to conditionally strip the accumulated state as we pass it to appReducer:

 const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action)
  }

  return appReducer(state, action)
}

Now, whenever USER_LOGOUT fires, all reducers will be initialized anew. They can also return something different than they did initially if they want to because they can check action.type as well.

To reiterate, the full new code looks like this:

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action)
  }

  return appReducer(state, action)
}

In case you are using redux-persist, you may also need to clean your storage. Redux-persist keeps a copy of your state in a storage engine, and the state copy will be loaded from there on refresh.

First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. When to use ES6 class based React components vs. functional ES6 React components?
  4. Accessing Redux state in an action creator?
  5. Where to write to localStorage in a Redux app?
  6. Fetch: reject promise and catch the error if status is not OK?
  7. Why is my onClick being called on render? – React.js
  8. Await is a reserved word error inside async function
  9. Deep copy in ES6 using the spread syntax
  10. How to update single value inside specific array item in redux
  11. How to dynamically load reducers for code splitting in a Redux application?
  12. Why use Redux over Facebook Flux? [closed]
  13. Is this the correct way to delete an item using redux?
  14. Is store.dispatch in Redux synchronous or asynchronous
  15. Updating nested data in redux store
  16. Cleaner/shorter way to update nested state in Redux?
  17. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  18. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  19. How to sync Redux state and url hash tag params
  20. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  21. Changing the layout of a component depending on Redux state
  22. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  23. Programmatically change Redux-Form Field value
  24. having multiple instance of same reusable redux react components on the same page/route
  25. Update single value in item array | react redux
  26. How can I dispatch function in redux?
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. FlatList renderItem is called multiple times
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment