A beginner’s guide to Redux with React

The toughest part of front-end development?

Bret Cameron

--

When it comes to learning front-end development, few tools cause more headaches than Redux. It’s become a standard technology in the repertoire of many React developers, but it’s arguably one of the trickiest parts. In case you need convincing, I collected several comments from people venting about their struggle to understand Redux on YouTube:

“I have thrown Redux in the dustbin as I can’t get my head around it.”

“This Redux stuff is too complex to understand and it’s still worse to remember all this.”

“Setting up Redux is one of the most disgusting things I have come across during my front end development journey… this really could be the ugliest part of the entire process.”

Fear not! It may seem fiddly at first but, like most tricky parts of web development, Redux gets a lot easier with practice.

I think one mistake that a lot of tutorials make is getting into the code too quickly before actually explaining the underlying concept. So, in this article, we’ll start by looking at what Redux is, the way it works, and common Redux file structures before actually jumping into some code and building a simple counter app.

I also think a lot of developers who want to learn Redux come to it knowing React, and they assume that — because they understand React’s state system — they’ll pick up Redux very quickly. While this may be the case for some, for most learners Redux may take some time to figure out. Be prepared to give it a bit of thought!

What is Redux?

Redux is a state container for JavaScript apps. It is most commonly paired with React, where it takes control of state away from React components and gives it to a centralised place called a ‘store’.

Consider the following diagram:

--

--

Bret Cameron

Writer and developer based in London. On Medium, I write about JavaScript and web development 💻