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.
Checkout more articles on ReactJS
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
- Implement redux store in ReactJS
- Update store to reset state
- Update component to reset the store
- 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.
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
1 2 3 4 5 | … … // reset store export const RESET_STORE = 'RESET_STORE'; |
To reset the state, you have to slightly update the code of the reducer file.
reducers/index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { combineReducers } from 'redux'; import counter from './counterReducer'; import head from './headReducer'; import user from './userReducer'; import { RESET_STORE } from '../actions/actionTypes'; // to combine all reducers together const appReducer = combineReducers({ counter, head, user }); // reset the state of a redux store const rootReducer = (state, action) => { if (action.type === RESET_STORE) { state = undefined; } return appReducer(state, action) } export default rootReducer; |
We have to create an action in userActions.js to reset the state.
actions/userActions.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { ..., RESET_STORE } from "./actionTypes"; ... ... // to reset the state of redux store export const resetStore = () => { return { type: RESET_STORE } } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | ... ... import { resetStore } from '../actions/userActions'; class Content extends Component { ... ... render() { const { tagline } = this.state; const { ..., store } = this.props; return ( <div className="main"> <div style={{ width: '60%', float: 'left' }}> <input type="button" className="btn" value="RESET STORE" onClick={resetStore} /> <pre style={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(store, null, 2)}</pre> </div> <div style={{ width: '40%', float: 'left' }}> <table border="1"> <thead> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Avatar</th> </thead> <tbody> {userObj.data && userObj.data.data.map((x, i) => <tr key={i}> <td>{x.first_name}</td> <td>{x.last_name}</td> <td>{x.email}</td> <td><img src={x.avatar} width="40" height="40" /></td> </tr>)} </tbody> </table> <div style={{ marginBottom: 20 }}> <h2>{counterObj.counterTitle}: {counterObj.count}</h2> <input type="button" className="btn" style={{ marginRight: 10 }} value="+1" onClick={incrementCounter} /> <input type="button" className="btn" value="-1" onClick={decrementCounter} /> </div> <div style={{ marginBottom: 20 }}> Tagline: <input type="text" className="tagline" value={tagline} onChange={e => this.setState({ tagline: e.target.value })} /> <input type="button" style={{ padding: '5px 7px', marginLeft: 10, width: 100 }} value="Set" onClick={() => setTagline(tagline)} /> </div> </div> <div style={{ clear: 'both' }}></div> ... ... </div> ); } } const mapStateToProps = (state) => { return { ..., store: state } } const mapDispatchToProps = { ..., resetStore } export default connect(mapStateToProps, mapDispatchToProps)(Content); |
4. Output
Run the project and check the output.
That’s it for today.
Thank you for reading. Happy Coding!
