Quick Look: What is Redux?

Introduction

This article will be a basic conceptual overivew of what Redux is, what it is used for, and how it works.

Quick useState Hook Refresher

Before we continue, let's review the useState() hook real quick. It helps us manage data that can change (for example, when a button is clicked) and changes to that data leads to the UI being udpated. State management hooks allow us to tell React that some data changed so that it can udpate the UI for us and keep track of that change in a state variable.
Remember, state is an object that is built into React that keeps track of data about the component that it exists in. Whenever state changes, the component re-renders.

What is Redux?

Redux is a JavaScript library that is a state management system for cross-component or app-wide state. What does this mean? It let's us manage state that affects multiple components or even the entire app.
State can exist for just a single component, but it can also exist for mutiple components. It can even exist for the entire application! State for multiple components require, prop drilling which is the concept of passing state down as props to different components that need it.
However, passing around data and updating functions from props can become tedious. Redux allows us to avoid prop chains and gives us a central place to control state.

Key Concepts

1. Redux is about having one central state storage in your application. This storage is for all the states you need in the entire application. Data in this central store is used by components and components set up subscrtiptions to the central store of information/state. This way, whenever the data in the central data store changes, it can "notify" the components so that the components can get the data that they need and use it. They don't get the entire data from the central store, they just get the "slice" of the central state that they need.

2. Components never change the central store of data. There is dat being passed down from the central state database to components through subscriptions, but no direct information flow back up from the components. Instead, reducer functions are used and are responsible for updating the central state database.

3. Components trigger data change in the central data storage. But, if there is no direct information flow back up to the central data store from components, then the only reasonable method with what we have learned so far, would be some sort of connection between the components and the reducer function. How does this conneciton occur? Through something called actions and components dispatch these actions. An action is a JavaScript object that defines the kind of operation that the reducer should perform. This is where Redux comes in and passes along or forwards the action to the reducer function. The reducer then reads the instructions and executes what the component is asking for.

Information Flow

Here is the information flow to review:
Central Data/State Store -(subscription)-> Components -(dispatch)-> Action -(forwarding)-> Reducer -(execution)-> Central Data/State Store --> REPEAT

Conclusion

As React applications grow in size, so will the number of components that are built in it. With all those components, it can become tedious to pass down state data as props to all the child compoennts. Redux allows components to take slices of the central state storage and these slices contain only the infomation that each component needs.

Resoruces

• redux.js.org
• Medium article on Redux
• freeCodeCamp: Redux for Beginners
• reactjs.org doc on useState
• w3schools on useState
• freeCodeCamp: How to Manage State in Your React Apps