Reusable Modal Architecture For Large-Scale React Applications - Part 2

Reusable modal snapshot

TL;DR UI engineering is a lucrative career if you're highly skilled. But it's very challenging, and you need to know what you're doing. In this tutorial series, you will learn how to architect a highly reusable, scalable and customizable Modal component for a large-scale application developed with React, Redux & React-Bootstrap. Modals are a very important UI element for almost every application, so architect them right!

This tutorial series is React 17 ready. See this post on React's soon to be deprecated lifecycle hooks.


The Modal Architecture

So how is our scalable Modal architecture going to work? There are two main pieces of information that will be mandatory for our Modal architecture to work: a unique key and what I call Modal state. Let me explain.

A Unique Key

The first piece of information required is a unique key that will be given to each Modal component instance. This key will uniquely identify each Modal and be passed in as a prop called modalKey.

<Modal
  modalKey="modal-key-x"
</Modal>

Why is a unique key necessary? Let’s say we want to have multiple Modals in one view (all reusing the same standardized Modal component). Each Modal displays different content, so they’re all different. How do we tell the application which one of these Modals should be displayed?

Reusable modal 1 view
Reusable modal 2 view


Answer: the application will know which Modal should be open because of its unique key. That’s the first piece of information our Modal architecture needs, a unique key identifying each Modal.

The second piece of information that we need is Modal state. By Modal state I mean data that represents which Modal with a given key should be open at any given time. It should be represented as an object that includes the Modal key and whether or not it’s open or closed.

{
  modalKey: 'modal-key-1',
  showModal: true/false
}

Important: this Modal state information must be stored in a state management system for the entire application (I prefer using Redux). It will be passed in as a prop called modalState to the Modal component like this:

const modalState = this.props.Modal // { modalKey: "modal-key-x",
                                         showModal: true }
<Modal
  modalKey="modal-key-1"
  modalState={modalState}
</Modal>

And a Modal state change will be triggered by an Action Creator or some sort of Dispatcher like this:

<input
  type="button"
  data-modal-key="modal-example-1"
  onClick={() => {
    actions.ui.openModal({modalKey: 'modal-key-1'})
  }}
/>

These a unique and Modal state are the main two pieces of information that are required to implement a scalable Modal architecture.

The trick of course is knowing how to effectively manage the entire UI state of a large-scale application. So before we move onto reviewing the code for our Modal component(s), let’s briefly talk about managing the UI state of an entire application with a superior design pattern like Redux.

Application State Management

When you develop a professional front-end for a large-scale application, you have to manage its state properly. To clarify, “state” refers to both the data that is flowing throughout an application, and also the visual state of things.

What do I mean by “visual state of things”? For example, is a Left-Nav toggled open or closed? Is the currently logged in user’s name displayed in the header? Is a Modal getting displayed or not?

These are all visual cues for the user and they’re all part of what we call “the state of the application”. You need to manage this effectively, and the design pattern that’s currently very popular for large-scale applications is Redux.

When you use Redux, the entire state of your application is contained within one big object in memory. This one object describes the current state of your UI, gets fed into React components, and tells your application how it should appear at any point in time.

So whether or not a Modal is open or closed is UI information that will be managed globally by Redux and maintained in memory in one central object.

Modal in Voice Record Pro - www.voicerecordpro.com
This is Voice Record Pro. I show developers how to develop it in my course. The 3rd party library used in the course is Material-UI.

Explaining how to use Redux is beyond the scope of this tutorial. If you aren’t already familiar with it, I highly recommend you learn and apply it to your own large-scale application because it’s a very effective design pattern that will help you scale.

If you need a good resource to learn Redux, check out my course How To Write A Single Page Application for Front-End Engineers and Developers, and my course How To Write A React Decentralized Application For Ethereum for Blockhain Developers. I teach Redux in depth in those two courses!

You can also read my tutorial “How To Manage UI State With Redux” where I share a lot of UI architecture goodies.

Next Steps

Next, we’re going to review the code for our main parent Modal component. There are other sub-components as well that we will use like ModalHeader, ModalBody, and ModalFooter. We will review those too.

Next Steps - The Main Modal Component.





Learn How To Develop Professional React Apps

Professional React App brand image

React, Redux & Webpack are HOT HOT skills that are IN DEMAND.

Do you have what it takes to be a professional developer?

Learn from an industry expert and start building professional React apps for clients, employers, or your own startup.


UPGRADE YOUR SKILLS