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/> 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
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
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
state.modals.isAlertOpen and pass in the
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.