Integration Of React With Redux

Here, in this write-up, we will try to create a sample application in React and will try to integrate Redux into it.

Redux offers the below components.

Provider
Store
Action
Dispatcher

The following diagram can give you a better understanding.

React and Redux manage unidirectional data flow. Let us create a sample application to understand this concept.

Create A React application first with the following command -

npx create-react-app <app name>

Now, open the application in Visual Studio Code. Remove the existing HTML code from app.js. Then, install the Redux component using this command.

npm install redux react-redux --save

Create a new sample component form in React application.

import React, { Component } from 'react'
import { connect } from 'react-redux'
class Form extends Component {
render(props) {
return (
<div>
<h4>{this.props.name}</h4>
<button>change data</button>
</div>
)
}
}
function mapStateToProps(state) {
return{
name:state.name
}
}
export default connect(mapStateToProps)(Form);

Add the Form component to app component.

import React, { Component } from "react";
import Form from "./form";
import "./App.css";
class App extends Component {
render() {
return (
<div className="App">
<header />
<h1>testing application</h1>
<Form />
<footer />
</div>
);
}
}
export default App;

Open index.js in the src folder and change as per the below code.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App'
const initialSate = {
name: "john"
}
const rootReducer = (state = initialSate, action) => {
console.log('rootReducer', action);
return state;
}
const store = createStore(rootReducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

In the above code, we can initiate Redux into the React application, and get the default data from store to display in a component. Let us try to understand how to update the store on any event or an action.

Add a Form component mapDispatchToProps and call the method on button click. For details, please find the below code.

import React, { Component } from 'react'
import { connect } from 'react-redux'
class Form extends Component {
render(props) {
return (
<div>
<h4>{this.props.name}</h4>
<button onClick={this.props.onAddDataClick}>change data</button> <br />
</div>
)
}
}
function mapStateToProps(state) {
return{
name:state.name
}
}
function mapDispatchToProps(dispatch){
return{
onAddDataClick:()=>{
console.log('onAddDataClick - onButtonClick');
const action={type:'ADD_DATA'};
dispatch(action);
}
}
}
export default connect(mapStateToProps , mapDispatchToProps)(Form);

Also, we need to modify the dispatcher method and add a switch case to get the action. According to that, we can modify the state.

const rootReducer = (state = initialSate, action) => {
console.log('rootReducer', action);
switch(action.type){
case 'ADD_DATA':
return Object.assign({},state,{name: "danny"})
}
return state;
}

One can create separate files for store, reducer, and actions so as to extend the application as per the requirement. This application gives you a simple idea of how to create a React application and integrate Redux.