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.

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'
  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. }
  15. function mapStateToProps(state) {
  16. return{
  17. name:state.name
  18. }
  19. }
  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";
  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. }
  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'
  7. const initialSate = {
  8. name: "john"
  9. }
  11. const rootReducer = (state = initialSate, action) => {
  12. console.log('rootReducer', action);
  13. return state;
  14. }
  16. const store = createStore(rootReducer)
  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'
  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. }
  15. function mapStateToProps(state) {
  16. return{
  17. name:state.name
  18. }
  19. }
  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. }
  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);
  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.