Integration Of React With Redux

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.

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.

Integration React With Redux 

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.

  1. import React, { Component } from 'react'  
  2. import { connect } from 'react-redux'  
  3.   
  4. class Form extends Component {  
  5.  render(props) {  
  6.    return (  
  7.      <div>  
  8.        <h4>{this.props.name}</h4>  
  9.        <button>change data</button>  
  10.      </div>  
  11.    )  
  12.  }  
  13. }  
  14.   
  15. function mapStateToProps(state) {  
  16.  return{  
  17.    name:state.name  
  18.  }  
  19. }  
  20.   
  21. export default connect(mapStateToProps)(Form);  

Add the Form component to app component.

  1. import React, { Component } from "react";  
  2. import Form from "./form";  
  3. import "./App.css";  
  4.   
  5. class App extends Component {  
  6.  render() {  
  7.    return (  
  8.      <div className="App">  
  9.        <header />  
  10.        <h1>testing application</h1>  
  11.        <Form />  
  12.        <footer />  
  13.      </div>  
  14.    );  
  15.  }  
  16. }  
  17.   
  18. export default App;  

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

  1. import React from 'react'  
  2. import { render } from 'react-dom'  
  3. import { Provider } from 'react-redux'  
  4. import { createStore } from 'redux'  
  5. import App from './App'  
  6.   
  7. const initialSate = {  
  8.    name: "john"  
  9. }  
  10.   
  11. const rootReducer = (state = initialSate, action) => {  
  12.    console.log('rootReducer', action);  
  13.    return state;  
  14. }  
  15.   
  16. const store = createStore(rootReducer)  
  17.   
  18. render(  
  19.    <Provider store={store}>  
  20.        <App />  
  21.    </Provider>,  
  22.    document.getElementById('root')  
  23. )  

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.

  1. import React, { Component } from 'react'  
  2. import { connect } from 'react-redux'  
  3.   
  4. class Form extends Component {  
  5.  render(props) {  
  6.    return (  
  7.      <div>  
  8.        <h4>{this.props.name}</h4>  
  9. <button onClick={this.props.onAddDataClick}>change data</button> <br />  
  10.      </div>  
  11.    )  
  12.  }  
  13. }  
  14.   
  15. function mapStateToProps(state) {  
  16.  return{  
  17.    name:state.name  
  18.  }  
  19. }  
  20.   
  21. function mapDispatchToProps(dispatch){  
  22.  return{  
  23.    onAddDataClick:()=>{  
  24.      console.log('onAddDataClick - onButtonClick');  
  25.      const action={type:'ADD_DATA'};  
  26.      dispatch(action);  
  27.    }  
  28.  }  
  29. }  
  30.   
  31. 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.

  1. const rootReducer = (state = initialSate, action) => {  
  2.    console.log('rootReducer', action);  
  3.   
  4.    switch(action.type){  
  5.        case 'ADD_DATA':  
  6.        return Object.assign({},state,{name: "danny"})  
  7.    }  
  8.    return state;  
  9. }  

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.