Hackernoon logoYour Guide To Learning Redux by@codebucks

Your Guide To Learning Redux

image
CodeBucks Hacker Noon profile picture

@codebucksCodeBucks

Helping you to learn code! here you'll find tutorials around web development. Keep Coding...๐Ÿ˜œ

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

image

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.

image

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.

image

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.

image

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!

image

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

Also published at https://dev.to/codebucks/what-is-redux-simply-explained-2ch7

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.