React Redux with Example

As per redux.js.orgRedux is predictable state container for JavaScript apps

So from this statement, we can understand that Redux is a library for all JavaScript apps. Redux is not a React specific library. We can use Redux with React, Angular, Node, Vue and even vanilla JavaScript

Another important point about Redux is it stores and manage the state of our application. If you learn React from scratch then you might aware of the state in React Component.

We create so many components in the React application and each component has its own state object. But the state of an application means the object which represented by all individual component of the application

You might have question like Components in React have already their own state then why do we need another tool like Redux to manage their value?

In the above image you can see suppose name I want to manage as state throughout our application and it is being used by many components. So we need to create in App component and pass it to other child components via props.

And if we change value from any component then we need to lift state value up to App component. It is not only about single name only but we might have so much data for real world application.

Now with Redux in the above image you can see there is only one place where state get stored means single store and that store is available to each component, means we don’t need to pass state through props.

So Redux helps you that without dealing with props we can manage state of our application

New concepts like useContext and useReducer can help you with the same implementation. But Redux is available since React development started so that’s why in many project you might see Redux instead of a hook.

Three Core concepts of Redux

A store in Redux is used to hold state of our application

An action in Redux describes how we want to change value in state of our application

A reducer in Redux carries the transition of state based on the action

In React with Redux application state of our whole application is stored in an object tree within a single store

Our application can not directly contact to store for changing value of state. To update value of state we need to let Redux know about action and based on action our state will get updated

To start redux coding with our react application we need to install redux and react-redux library first.

npm install redux react-redux

Actions are pure JavaScript object. Type property we most of use with Actions to confirm the type of action being performed and Type contains string constants.

CountAction.js

To specify how state tree update we need to write pure reducers. Reducer is kind of javascript function with two arguments as given below.

Reducer - (prevState, action) => newState

Reducer function will have two arguments (1) previous state (2) action

The reducer function will return the updated state. Action can help you to confirm different operations inside Reducer.

CountReducer.js

Store in Redux is container where state of our application get stored.

We have only one store in Redux application. And with React-Redux we will wrap all child components where we want to use state with <Provider> Component and Provider component need store as a props.

So we use Provider in App.js so that our state from store available to all child components in our application

App.js

Finally we will create DisplayCount Component in your application you create any component as per need.

In DisplayComponent three steps you need to follow which help you to convert state from store to props in our component.

DisplayCount.js

Here you can see mapStateToProps function converts state object to props object and return it.

Similarly mapDispatchToProps function converts dispatch to props object and return it.

dispatch is function of Redux Store. It will help you to dispatching the action to the store and this in the only way in Redux to change the State.

We need to pass action object as argument to dispatch function and accordingly reducer function will get executed and updated state will return.

Feel free to comment. Thank you for Reading.

Happy Coding.

Related Posts

Leave a Reply