What is Redux and How Do I Learn it?
If you’ve spent any time working on JavaScript apps, especially in component-driven libraries like React, you have come across State. It is an essential part of React and is absolutely vital to know. You may be less familiar with the state-management tool Redux. Redux exists to make state easier to manipulate and use. This article will briefly explain the very basics of what state is and give some very useful suggestions for ways to learn about Redux and build on that base knowledge.
State is ‘data over time’. It is the status of things as they change and receive new information. State is simply: stored information that can be edited like any other variable. State is not in of itself a complicated concept to grasp or understand, or even especially difficult to implement into apps.
The React useState Hook makes it easy to edit and use State like so:
import React { useState } from ‘react’;const [currentState, setCurrentState] = useState('');
Once we import state in the first line, we can set it up in the second. ‘currentState’ simply declares the variable of what we want to label our state, while setCurrentState declares the setter method. Whatever you pass into the useState parenthesis will be the default value. Here we have set it as a blank string but we could easily have set it to null, 0 or false if we wanted our state to use integers, boolean values etc.
So far so simple. The issue with state in React, comes when we are trying to use state across different components. As state is a locally stored variable, not every component will have access to it unless you pass it down.
<NewComponent currentState={currentState} setCurrentState={setCurrentState} />This works fine and well for most applications but can become unwieldy and complicated when you are dealing with large applications with lots of different child components each needing access to different states. The solution to apps like those is something called Redux.
Redux is a state-management tool for libraries like React and Angular that allow you to keep a store of all your state which can be accessed and edited by any component whenever necessary without needing to be passed down or up. It is a fantastic tool and can be a vital weapon in your JavaScript arsenal.
However, it is notoriously difficult to use and integrate into your app. But, intrepid coder, you will find below the links that will enable you to learn and master Redux and successfully store state at will!
The first and most important link before progressing is this article from the co-creator of Redux, Dan Abraham that explains what Redux and asks whether it is even necessary for you to use at all.
Once you have decided that yes, you need Redux, or no, but I want to learn it anyway. In my opinion the best place to start is with this excellent Scrimba series. It will teach you the process by showing you how to set it up and get things working while also giving a high-level overview of the concepts. The only downside is that Redux has changed significantly in the past few years and this perhaps dwells too long on past versions.
Once you have started working through that, I fully recommend reading the docs in full. The tutorial is good, if a little dense but will ensure you have a thorough understanding of everything.
Last but not least, I highly recommend Valentino Gagliardo’s thorough website and tutorial devoted to learning Redux. The videos are very informative and is a great way to round out the learning.
Armed with this knowledge from these resources you will be an expert in Redux in no time!
