Redux was a really challenging topic for me to pick up. But I was able to find my way around it after I made a lot of research, shout out to my teammates for always answering my darning questions. This is just a quick overview of what I was able to learn.

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. It allows for centralization where the general state of your app is stored in a particular place and every component has access to it and takes whatever they need to update their content.

Furthermore, when using Redux you’re not allowed to make changes directly to the central state (store) and I’ll talk about that soon but before that here are some terminologies that are used when configuring Redux.

• Actions: Actions are specific rules that should happen when an event handler is triggered. For example, click events, change events, etc.

• Dispatch:This is what carries the actions from where they are defined and to the reducer.

• Reducers: Reducers are what make the changes in the general state. Remember we’re not allowed to directly make changes to the state. Actions are dispatched and sent to the reducers and from there the state is changed.

• State: This is the general state that holds all the values that we intend to make use of.

Workflow of Redux
Source: Redux Official Documentation

Let's take a look at the image above, the flow starts from when the initial State is plugged into the UI. On the UI, an event is triggered by clicking on the Deposit button, that button is fed into the Dispatch and it triggers an action to be dispatched that goes to the Reducer. The Reducer is where the major decisions of altering the state are made and the result of that is what mutates the state to effect the new changes.

Although Redux solves a lot of problems in state management, it still has lots of setbacks such as too much boilerplate code just to effect a little change on the state and render that on the UI. So a new standard of adding Redux to your project was introduced where we make use of Redux Toolkit. This comes with all the packages needed to set up Redux in any project and we also don’t need to add too much boilerplate code to set up Redux but the general principle explained earlier is still the same.

This principle was tough to grasp at first because it was a new concept, but I had to learn it as fast as I could so I could implement it into the project we were working on. But it was worth it!

I wrote this article in August 2022, but I didn't post it publicly. I hope this helps someone.