React + Redux

#react #redux #javascript #webdev

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.

In App.js we include CakeContainer Component.

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 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.

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.

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.