The Fastest way to Learn Redux

The kata that you can follow to learn Redux quickly if you know React.

Photo by Lautaro Andreani on Unsplash

In this article, I will teach you Redux, but leveraging in your already existing knowledge of React. The article presents itself in a form of a kata that you can follow step by step from zero. We will convert a React counter component, into a React/Redux counter. It assumes that you already know how to code JavaScript, a bit of React, and how the React state works. We will heavily leverage in refactor capabilities of the IDE to simplify each step. You can also study it as a kata, repeat and repeat step by step, the form is what matters, not the conclusion.

Step 0. A React Counter

Just before Start, create a React Counter component using setState.

Step 1. Use setState function notation

One of the problems of React is that the state may become stale. It happens when a new event has fired before React has the opportunity to read again the state. But React accepts a function to update the state, so we will have always the fresh value.

Replace the setState call argument, with a function to increase the fresh state value.

Step 2. Refactor to get the Reducer

It turns out that the function that you pass to setState is almost a reducer: given the previous state, it returns the next state.