Redux in less than five minutes

#redux #react #webdev

Heelllooo there. Now if you were anything like me, you probably found learning Redux quite a cumbersome task. The purpose of this article is to simplify the concepts and bring you to a high level understanding of Redux and how it works.

Store

Redux in a nutshell is a state management library. One of the core parts of Redux is what is called the store which you could think of as a cloud that sits on top of your application and holds the current state of your app at a given point in time.

So, a few things you need to know about the store :

It is the single source of truth, meaning all your UI elements fetch state and any updates to application state from the store and only from the store
The store is not directly mutated because the store in its nature is an immutable object.

So how then do we actually update the state? I am glad you asked. Because the store is an immutable object, we write a function called a reducer, that takes the store as an argument and returns an updated store with the updated state.

Reducer

Another core piece of Redux is what is called the reducer. All the reducer really is, is a function that takes the current instance of the store and returns an updated store. The reducer does not touch global state at all, mutate any arguments or have any side effects.

Action

The last major piece in this puzzle is called the action. The action is just a plain JavaScript object that describes what just happened. The action represents what just happened and can really represent any action a user might perform on your application e.g. adding an item to cart, deleting a record, updating their name on their profile etc. The action informs the reducer on what needs to be changed. Based on the type of action, the reducer then knows what properties of the state must be updated.

How does it all work under the hood?

Whenever an action is performed by the user, an action object is created and dispatched. This is done through the dispatch method which takes in an action as an argument
The store will forward the action to the reducer (Note that the store is in charge of calling the reducer)
The reducer will then receive the action, compute a new state based on the action type and will then return the new state to the store
The store will then set the state internally and notify all the UI components about the update
The UI components will then pull the updated state from the store and refresh themselves accordingly.

This is a VERY, VERY high-level explanation of Redux. Under the hood, it is a bit more complex but it is important to understand the basics because it will inform your understanding of the deeper operations and complexities of the library. I hope this helped! Please share if you think this might help someone else!

Till next time 😃