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
- react-select" title="How to disable an option in react-select">How to disable an option in react-select
- Google Maps in ReactJS">Implement Google Maps in ReactJS
- Ternary Operator in ReactJS
- Element Variables in ReactJS
Why do we need it?
Let's assume that you are working on form-in-reactjs-using-secure-rest-api" title="Login App – Create login form in ReactJS using secure REST API">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.
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
…
…
// 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
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
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
...
...
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.
Output - How to reset the state of a Redux store - Clue Mediator
That's it for today.
Thank you for reading. Happy Coding!
