Understanding Redux Implementation

In our last article, we have covered what redux is, in Layman’s Language(If you haven’t read it yet, and have any doubts in understanding redux, you can read here). So Now, Let’s understand how we can implement these redux principles and make our machine understand our requirements.

ReduxFlow

Redux works on three principles to perform state management for you, Redux would require these three things from you to be able to understand what you need:

1. Action
2. Reducer
3. Store

1. Action

Redux needs to know what action you want to perform in your application, as you already know we can’t directly perform actions on our application, because if we do so, we loose the consistency of our application data, so we use redux to maintain that for us.

So, Actions are the only way through which you can interact with the redux store. Implementing Actions for our application is very easy, Actions are just plain JavaScript objects that must contain ‘type’ property.

actionExample

You might be confused about what you can consider as an Action, So Action can be anything that is affecting the state of your application. State is the data of your Application that you’re handling. So, any action that user performs, which affects the state of your application can be your action. For example, here we have created an action to track if user has logged-In or not, to maintain user data, we can also create more such actions like to check if the user has signed-up or not, or maybe what he does after login we can then maintain it by writing other actions.

So, we understand what we can define as an Action now, Let’s move on to other core principle of Redux.

2. Reducer

Reducer is a function that accepts two arguments, one is state and other is action. Redux wants to know what action you want to perform on what data, so it takes state as data and your action as second argument in reducer function and then reducer function returns the updated state or you can say updated data, by performing certain action on your data.

For example: “I have 5 chocolates initially, now I want to perform an action of giving 2 chocolates to my younger brother, So How would I write an Action and Reducer function for it.”

reducerExample

Here, I have written an Action called ‘GIVE_TWO_CHOCOLATES’, initially I had 5 chocolates, so I kept my chocolates count in state as ‘5' and using reducer function (reducer function name could be anything you want), I have returned the updated state, if the action.type matches perfectly.

I hope we are able to grasp things so far, Let’s move on to Redux Store.

3. Store

So far we have informed redux that we have an initial state and we want to perform some action on it, and using reducer function we also able to update our state, Now we need redux store to wrap our application, So that we can monitor the user actions, if we would be an outer entity, we wouldn’t get to know what’s going on inside the application, so to help our application to manage its data, we need to be friends with our application, We somehow have to get the information of application data and user activities, So to capture that, we need to have a redux store wrapping our application.

Let’s see how we can implement that:

creatingReduxstore

wrappingApplication

Here, in the above two pictures, we have created a store by importing createStore from redux library and then we used that store and wrapped the application in Provider Component, passing the store reference to Provider to connect react application with redux.

So, this is how we can implement Redux principles in our application. I hope it helped you, We will be learning about how we can connect react with redux and can use subscribe and dispatch methods to maintain the data consistency in our Application, you can anytime post your queries or suggestions to improve this space in the comments below.

Thanks in advance!!

Happy Learning!!