Redux in the Wild: Some Practical Container Examples

There are already plenty of articles out there explaining the concept of Containers vs Presentational Components in Redux. I found these articles were great for getting a general understanding on containers, but like anything you need to usually get your hands dirty. This was the case for myself, as I found I needed a few Redux projects under my belt before I had my aha💡 moment.

That is why instead of rehashing those articles I wanted to provide a few practical container examples. These examples are by no means textbook containers — if there is even such thing . These could have just as easily been child components in a connected parent component. That’s the great thing about React/Redux — there’s no “one way” to get things done. Alrighty onto the examples…

Spinner

The <Spinner/> component is nothing special — it’s just an animation that let’s the user know something’s happening. This component takes a single isSpinning prop that will render the component when the value is truthy.

Let’s pretend we have an app that fetches a list of articles from a service, and renders them on the page. Our Redux state has a property isFetchingArticles that is set to true while the articles are being fetched. We could have connected the Spinner component directly to our state, and then set isSpinning: state.isFetchingArticles. Although this would work what happens when we want to display Spinner for something else? That is where containers come in…

Instead of connecting the store directly to the <Spinner/> component I created ArticleSpinner, which is a simple container. This is great because I’ve decoupled <Spinner/> from the logic that determines when it should display, and that allows me to use it for other things.

Now when I need to use<Spinner/> for something else, let’s say submitting an article, I can just create another container. In this case I’ve created a new container called ArticleSubmitSpinner.

Modal

Modal windows… YAWN! Yes they are boring, but I’d be damned if I don’t use them in all my projects. This <Modal/> component consists of a blocker that will overlay the entire viewport, and then a content area that represents the modal window itself that sits on top of the blocker. The component has a children prop, which will contain the guts of the modal, and then an isOpen prop which renders the modal when value is truthy.

In this case I’m going create a container every time I need a different type of modal window. I already have a component called ImageCarousel that I want to display in my modal window. All I need to do is create a new container for <Modal/> passing in ImageCarousel and connect isOpen to the state. In my example my state has a property called modals that tracks all the different modal states, and for this particular one I’m using isImageModalOpen. You will notice that I use mapStateToProps to pass in children, which allows me to pass state.images to ImageCarousel as a parameter to React.createElement.

Again if I need to create another type of modal window I just create another container. In this case I’ve created a new container called AlertModal, and connect isOpen to state.modals.isAlertOpen and pass in the Alert component.

Conclusion

Although these examples were quick and dirty I hope they demonstrated some different variations on leveraging containers. If you’re new to Redux and you’re still confused on this container vs component thing stick with it! It does take some getting used to, but it will all be worth it when you to have your own aha 💡 moment.

Show your support

Clapping shows how much you appreciated Ryan Johnson’s story.