Redux is basically a powerful JavaScript library used for the purpose of maintaining the state. This can be used with web-based technologies, however, it’s likely to be used with React and AngularJs to manage the data across the application.

The question is – Is it a framework?

Then the answer is ‘No’, it’s not a framework like AngularJs and VueJs. Redux is simply a data flow mechanism used to manage application data flow and state.

Its state predicting feature allows you to manage the data you want to display and the response you can generate for any actions. Redux makes states of application more manageable and testing easy.

Why Redux?

In the traditional application, it was quite difficult to maintain the data flow and the architecture of data traverse was more complex.

Here we will try to understand it through an example

Assume you have a `“name`“data in Parent which is going to be displayed using 3 levels deep component, we will be passing that using below format,

class Parent extends React.component {
constructor(props) {
super(props) {
this.state = {
name: “Manish”
}
}
}
render() {
return(

)
}
}

const ChildLevel1 = (props) => {
let { name } = props;
return {

}
}

const ChildLevel2 = (props) => {
let { name } = props;
return {

}
}

const ChildLevel3 = (props) => {
let { name } = props;
return {

My name is {name}.

}
}

Looks complicated! So, to overcome these drawbacks engineers have designed Redux.

How Redux handle this?
Check the method below,

Make Reducers
———————-

const name = (state = ‘Manish’, action) => {
switch (action.type) {
case ‘SET_NAME’:
returnaction.payload

default:
return state
}
}
constrootReducer = combineReducers({
name
})

Create A store
———————-
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk),
window.devToolsExtension ?window.devToolsExtension() : f => f
)
);

Now use in whichever component you want to use.

You can use it as given below

There are two ways to get data from Store

Step 1:
– Import store object
– Use it like, store.name (Output: ‘Manish’)

Step 2:
Pass store to the provider and then access it inside component like below.
“`

“`

and then, work inside Components like below

“`
class ChildLevel3 extends React.component {
render() {

My name is {this.props.name}

}
}
mapStateToProps = (state) => {
return(
name: state.name
)
}

export default connect(mapStateToProps, null)(ChildLevel3)
“`

In this, there are some new keywords are used like connect, mapStateToProps.

Connect:

Connect is a React Connector that is used to connect store data with components. It is also can perform as a Higher Order Component. It takes data from the Store and provides it to the component accords to the need.

It uses two functions,
mapStateToProps and mapDispatchToProps
mapStateToProps =>

That is used to get pieces of data from the store as per the need of a component. Just like we are using a name in the above example. It will map state data to the component props.

mapDispatchToProps =>

It is being used to assign actions to the component props, and those actions are dispatched to the store.

What are Actions, Action creators and reducers in React-redux?

Actions are simply a javascript object that used to send data from applications to the store. These are the only source of information that makes information available for stores. This can be sent to the store using store.dispatch().

Action creators are exactly that—functions that create actions. It’s easy to conflate the terms “action” and “action creator”, so do your best to use the proper term.
Action creator is a function that returns action object, performing an action manually is more prone to error thus action creator came into action. The difference between the term action and action creator is subtle, use it properly.

Reducers define the changes in the application’s state while an action sent to the store. Action defines what is just happened but it doesn’t specify how the application’s status changes according to actions sent to the store.

Redux Integration with web technologies

Redux not only belongs to React but can be implemented with Ember, jQuery, Angular or Vanilla javascript also.

So, we are going to implement this with ReactJs.

Redux is not included with React so to use that we need to install it first.

“`
npm install –save react-redux

“`

Let’s start in the simplest way.

Below, we will be using an Input to get the name and then instead of using component state we are using Redux for the storage purpose.

Inside App.js we are creating an Input for the name.

```
import { updateName } from ‘./Actions/appActions’;
class App extends React.component {
  hadleChange = (e) => {
    this.props.updateName(e.target.value)
  }
 
  render() {
    
  }
}
mapDispatchToProps = (dispatch) => {
  return {
    updateName: (val) => dispatch(updateName(val))
  }
}
 
```

export default connect(null, mapDispatchToProps)(App)

Above we are using ‘updateName’ function to update the name that would be our Action to make data manipulation in the Store.
Let define Action, Create appActions.js file inside Actions Folder like below

appActions.js

“`
export function updateName(value) {
return {
type: ‘UPDATE_NAME’,
value
}
}

“`

Now, when component dispatches an Action, it will be handled by Reducer.

appReducer.js

export function name(state=’’, action) {
switch(action.type) {
case ‘UPDATE_NAME’:
returnaction.value
default:
value
}
}

To make the store object, we will use the ‘combineReducer’ to wrap all the reducers derived inside our application like below

rootReducer.js
import { combineReducers } from “redux”;
import { name } from ‘./reducers/appReducer’;
export default combineReducers({name})

We will be using this combined reducer to create store objects, so with store objects, our index.js file will look like below.

“`
import React from ‘react’
import { render } from ‘react-dom’
import { Provider } from ‘react-redux’
import { createStore } from ‘redux’
importrootReducer from ‘./reducers’
import App from ‘./App’

const store = createStore(todoApp)

render(

,
document.getElementById(‘root’)
)
“`

Above we have created a store object using the ‘createStore’ and then passed that store object to the provider, which will make store state accessible to components.

Now, ChildElement component will use that update store data to display the name attribute

“`
classChildElement extends React.component {
render() {

{this.props.name}

}
}
mapStateToProps(state) {
return {
name: state.name
}
}
export default connect(mapStateToProps, null)(ChildElement);

“`

So, Instead of passing data to a very deep level we can utilize the data of one component to any other component. This is how redux data flow Architecture works.