modalsReducer is where we will perform some logic based on actions triggered by the components. In this example, we have only one modal, but we can use this reducer to manage as many modals as we want.
The reducer consists of an initial state object and the function that will be invoked when we need to make some update on the state. The
modalsStore function receives a state and an action as a parameter. The action tells what change we should make in our state.
If the type of the action is
ShowYesNoModal, we return a new state setting the
showYesNoModal value to
true, indicating that we want to show the modal. Once the modal is open, we can close it by dispatching an action with the type
HideYesNoModal, returning a new state with the prop
showYesNoModal = false.
In order to connect this reducer to our components, we need to make some changes to the
Basically, we are creating the store and connecting it to our components by wrapping our app with the
Provider component. Our components can now dispatch actions and subscribe to state changes. Note that we can combine several reducers. In this example, we have only the
modalReducer, but we can have
Now we can connect our
MainComponent and start to dispatch actions in order to show the
Now we don’t have the modal open state in the
MainComponent anymore. We have successfully removed the responsibility of the
MainComponent to manage the modal state. Instead, we are receiving the function
showYesNoModal by props, and it will be invoked when the modal should be open.
But where does this
showYesNoModal function come from? This function is passed to props when we connect the
mapDispatchtoProps to our component on line 36. Basically, we are dispatching an action of type
ShowYesNoModal that will be captured by our reducer and trigger a state change.
Now we just need to subscribe to this state change in the
YesNoModal itself in order to show the modal:
When we map state to props (line 33), we are just basically subscribing to any state change in the global store. The
mapStateToProps function receives the global state object and maps it to another object containing a prop that manages the modal visibility.
showModal prop, the component is receiving a function called
closeModal. Once invoked, it will dispatch an action with the type
HideYesNoModal that will be captured by our reducer and update state, setting the prop that controls the visibility of the modal to
And that’s it: We are now controlling our modal by using the global state managed by Redux. At this point, you are probably asking yourself, “Why should I use Redux if I ended up writing more code to achieve basically the same result?”
In the example above, we only have one modal. What if we had several other modals? Would we want to manage the modal state each time we need it directly in the components? Probably not.
Once we write the first reducer and connect it to the rest of the app, implementing new reducers will be fairly straightforward. We just need to import them to our
index.js file and combine them when creating the store.
To finish this off, I would like to share a real-world reducer that I implemented a long time ago in one of my projects. This is exactly what we discussed in this article:
The focus of this example was to deal with modals, but we can extend this approach to a lot of challenges that need to share this state control throughout the application, like alerts, notifications, authentication, etc.
That’s all for today, folks. I hope that this article has helped you in some way.
Take care and happy coding!
The source code is available on GitHub.