Your Guide To Learning Redux

For beginners, learning a Redux is a little bit complex. So I will try my best to make it as simple as possible.

If you prefer to watch the video, then here it is. Otherwise, you can keep reading 😄

Now let's dive in ^_^

Before going into Redux, let's see why we needed Redux in the first place.

The Problem

Let’s say as a root component you have app.js file in your project, and in the component tree, the first layer contains 3 components, and in the 2nd layer, there are two child components of the 2nd component.

Here, you have fetched the data from an API and you save it in the state of the 2nd component. You can use this data state in child components by directly passing them downwards.

Now the problem occurs when the neighbour component which is 3, wants to access that data state.

So the problem is when multiple components that need to share and use the same state.

This can be solved by “lifting up” the state to the parent component. So you can lift the state from the 2nd component to the app.js file. and then you can use this state in the 3rd component.

But that does not help always because in a large application there are many states needed to be used in many different components, so it is not the best practice.

One way to solve this problem is to take the state outside of the component tree and set it as centralised. So that any component in the tree can access and update the state without worrying about its hierarchy in the tree.

This is the basic idea behind Redux: a single centralised place to contain the global state in your application, and specific patterns to follow when updating that state.

You can use redux to store the state and you can use it to any component without worrying about the hierarchy.

Now let’s see how the application works normally in react without Redux.

Consider this action as a trigger to update the state and when the state gets changed then view updates the UI with the new state.

For simple counter application, when we increment counter value then increment event goes to state and state updates new value then, view re-renders UI based on the updated state.

So let’s see what happens when you use Redux.

In the Redux, there is a function called reducer.

This reducer function takes two arguments, first is the state itself, and the second is the action object.

Action objects can have a type of action like increment and any data that wants to modify the state.

Now based on the previous state value and action type Redux calculate a new value for the state and updates it.

These all things happen inside the Redux store, you can say it as any centralised database for state management.

Then when the view gets the new state value, it re-renders the UI.

Let me show you another example of how Redux works!

As you can see here this is a simple GIF that explains how redux works, you can find it on the official Redux documentation.

Now using this UI you can either deposit or withdraw money.

When we click the deposit button, the click event goes to the event handler. Based on the event, the event handler dispatches an action with the type as deposit and any details needed in the payload property.

This reducer accepts two things: the state and the action object. The previous value of the state is $0 and the action is for the deposit. So, the reducer will update the new state by depositing a $10 amount.

You can see in the UI balance, it changed from 0 to 10$.

Redux by definition

It is a Predictable State Container for JS Apps.

It is,

Predictable --> because it helps you write applications that behave consistently, and can run in different environments (client, server, and native).

Centralised --> because of this feature, we don't need to lift state to parent components and we can use state from any component we want due to this centralised behaviour.

Debuggable --> There is an extension called Redux DevTools which is an excellent tool to debug Redux applications. Using this tool you can see when, where, why, and how your application's state changed.

Flexible --> because it works with any UI layer, and has a large ecosystem of ad-dons.

If you're confused about anything related to this topic feel free to ask me 😉

Thanks For Reading and Supporting.😄

Feel free to visit my YouTube channel:

@CodeBucks