React: Use Redux To Control Modal Visibility States | by Bruno Joaquim | Better Programming | Jan, 2021 – DzTechno

The 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 index.js file:

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 notificationReducer, alertReducer, etc.

Now we can connect our MainComponent and start to dispatch actions in order to show the YesNoModal:

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.

Besides the 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 false.

Dispatch/state update flow

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.

Leave a Reply

Your email address will not be published. Required fields are marked *