DEV Community

Cover image for React + Redux
Md Anas Sabah
Md Anas Sabah

Posted on • Edited on

2 1

React + Redux

What is Redux?

"Redux is a predictable state container for JavaScript apps".
To understand what this means, lets break it down into three parts.
1.It is for JavaScript App.
2.It is a state container.
3.It is predictable.

Let's take a look at these parts individually.

Redux is for JavaScript Applications.

Redux is not tied to react. It can be used with any UI Library or Framework such as React, Angular, Vue or even Vanilla JavaScript.

So if you have this mental model where Redux and react are tightly coupled, now its a good time to get rid of it. Instead you should remember that Redux is a library for JavaScript application.

Redux is a state container

Redux stores the state of your application.

But what exactly do we mean by state of an application? Well consider a react app, we all learned about state of the component for example if we have a login form the state of the component is simply an object that holds user name password and a submitting flag to indicate the submit action happening in the background.

Or if we had a list of users to display the state of the component would be an object that contains an array of users.

Extending on this knowledge we can say that the state of an application is simply the state represented by all the individual components of that application this includes the data and the UI logic if your application is medium to large in size the state of the application could be something like his user logged in what is their username their profile pic URL a list of online users is a particular model opened is data being currently fetched and so on Redux will basically store and manage this application state. All right that clears tutoring of the definition Redux is a state container for JavaScript apps.

Redux is predictable

Predictable in what way? Redux is a state container and in any JavaScript application the state of application can change.
For example: In todo list app -- item(pending) -> item(completed)
In Redux, all state transitions are explicit and it is possible to keep track of them. In other words, the changes of your application's state become predictable.

Why React + Redux

Component in react have their own state. Why do we need another tool to help manage state?

React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.

If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.

In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.

React Redux Setup

Create react application using:

npx create-react-app app-name

Next we install the two require packages i.e, redux and react-redux.

npm intsall redux react-redux

Now we will create component folder in src folder, inside component we will create CakeContainer.js file.

CakeContainer

In App.js we include CakeContainer Component.
App.js

After including CakeContainer component in App.js, let's define Actions and Action Creators.

Here, we will create cakeAction.js file and inside this file we will create a function called buyCake that returns an Action.

Action

Action is a object with a type property and Action creator is a function(here: buyCake) that returns a object.

Next we are going to implement Reducer.

We know that a reducer is a function that accepts state and action as parameters and returns the new state.

Reducer

Create Redux Store(state) and provide it our React application.

Lets create store.js file and within this file we create our store for which we use createStore method from redux.

Store

At last, In app.js import Provider from react-redux and wrap the div tag in the return statement with this provider component
and for provider component to know our redux store we specify it as a prop.

App.js

That's all, I hope you found this article helpful.🙂

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (2)

Collapse
 
buddhadebchhetri profile image
Buddhadeb Chhetri

Thanks man ,This is really helpful !!

Collapse
 
mdanassabah profile image
Md Anas Sabah

Glad to help.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay