We will create simple reactjs application and connect with react redux . React is popular front end framework to create single page application.The Redux is a state management tool.It helps you write applications that behave consistently, run in different environments (client, server, and native).



React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

We will add employee module into this React Redux Example Tutorial.we can add new employee into state and stored into store object. we can also fetch all employee data from store and display into html table.

What is Redux

The Redux use the state of your application is kept in a store and each component can access any state that it needs from this store.

The Redux has following three main concept –

Store : The store holds the application state. There is only one store in any Redux application.

: The store holds the application state. There is only one store in any Redux application. Reducers : Reducers are pure functions that take the current state of an application, perform an action and returns a new state.

: Reducers are pure functions that take the current state of an application, perform an action and returns a new state. Action : The Actions are events. They are the only way you can send data from your application to your Redux store.

Why Do We Need Redux?

The main difficulties in single page application is the sharing of data between different component.The Redux solve this issue using store the application state.

The file structure would be like below –

src

app.js – The main containers file.

– The main containers file.

AddEmployee.js – This is Dumb file for create new employee.

– This is Dumb file for create new employee.

Employee.js – This is Dumb file for employee list.

– This is Dumb file for employee list. actions

index.js



models.js – The Employee module actions file.

– The Employee module actions file. reducers

index.js



empReducer.js – The Employee module reducers file.

– The Employee module reducers file. containers

CreateEmployee.js – This is the Smart Component for Create Employee.

– This is the Smart Component for Create Employee.

EmployeeList.js – The is the Smart Component for Employee List.

There are two type component exist in react redux integration. The Dumb component, which is static and, Smart component which have all logic and connected to store.

Create React Application

We will create react application using below command –

create-react-app react-redux-app-example

Above command will created react react-redux-app-example application and install all basic dependencies.

Install React Dependencies

This react example have following external dependencies and, need to install into our application using npm.

The bootstrap 4 will use to list and create form for employee module.



npm install bootstrap --save



Added below entry into src/index.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Installed redux and react-redux package for Redux functionality.



npm install redux react-redux --save



Installed node-uuid package for uuto incremented value for id field.



npm install node-uuid --save



How To Connect Redux With React Application

We will follow following steps to connect redux with react state.

We will create actions/models.js file and added below code into this file –

export const ADD_EMPLOYEE = 'ADD_EMPLOYEE'; 1 export const ADD_EMPLOYEE = 'ADD_EMPLOYEE' ;

We will create actions/index.js file and added below code into this file –

import { ADD_EMPLOYEE} from './models'; import {default as UUID} from "node-uuid"; export const createEmployee = ({ name, age, salary }) => ({ type: ADD_EMPLOYEE, payload: { id:UUID.v4(), name, age, salary } }); 1 2 3 4 5 6 7 8 9 10 11 12 import { ADD_EMPLOYEE } from './models' ; import { default as UUID } from "node-uuid" ; export const createEmployee = ( { name , age , salary } ) = > ( { type : ADD_EMPLOYEE , payload : { id : UUID . v4 ( ) , name , age , salary } } ) ;

We will create reducers/empReducer.js file and added below code into this file –

import { ADD_EMPLOYEE} from '../actions/models'; export default function empReducer(state = [], action) { switch (action.type) { case ADD_EMPLOYEE: return [...state, action.payload]; default: return state; } } 1 2 3 4 5 6 7 8 9 10 import { ADD_EMPLOYEE } from '../actions/models' ; export default function empReducer ( state = [ ] , action ) { switch ( action . type ) { case ADD_EMPLOYEE : return [ . . . state , action . payload ] ; default : return state ; } }

We will create reducers/index.js file and added below code into this file –

import { combineReducers } from 'redux'; import emps from './empReducer'; export default combineReducers({ emps: emps }); 1 2 3 4 5 6 import { combineReducers } from 'redux' ; import emps from './empReducer' ; export default combineReducers ( { emps : emps } ) ;

Now, Create smart add employee component into containers folder.Let’s create container/CreateEmployee.js and added below code –

import { connect } from 'react-redux'; import { createEmployee } from '../actions'; import AddEmployee from '../AddEmployee'; const mapDispatchToProps = dispatch => { return { onAddEmployee: emp => { dispatch(createEmployee(emp)); } }; }; export default connect( null, mapDispatchToProps )(AddEmployee); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { connect } from 'react-redux' ; import { createEmployee } from '../actions' ; import AddEmployee from '../AddEmployee' ; const mapDispatchToProps = dispatch = > { return { onAddEmployee : emp = > { dispatch ( createEmployee ( emp ) ) ; } } ; } ; export default connect ( null , mapDispatchToProps ) ( AddEmployee ) ;

Now, Create Dumb components into app/AddEmployee folder, We will add below code into this file.

import React from 'react'; class AddEmployee extends React.Component { state = { name: '', age : 0, salary :0 } //handle input changes inputChange = e => { this.setState({[e.target.name] : e.target.value}); }; handleSubmit = e => { console.log(this.state); e.preventDefault(); console.log('fffff'); if(this.state.name.trim() !== '') { this.props.onAddEmployee(this.state); this.handleReset(); } }; handleReset = e => { this.state = { name: '', age : 0, salary :0 } }; render() { return ( <div> <form onSubmit={ this.handleSubmit }> <div className="form-group"> <label htmlFor="emaployeename">Employee Name</label> <input type="text" className="form-control" placeholder="Employee Name" className="form-control" name="name" onChange={ this.inputChange } value={ this.state.name }/> </div> <div className="form-group"> <label htmlFor="emaployeeAge">Employee Age</label> <input type="text" placeholder="Employee Age" className="form-control" name="age" onChange={ this.inputChange } value={ this.state.age } /> </div> <div className="form-group"> <label htmlFor="emaployeeSalary">Employee Salary</label> <input type="text" placeholder="Employee Salary" className="form-control" name="salary" onChange={this.inputChange} value={this.state.salary } /> </div> <div> <button type="submit" className="btn btn-primary ml-2">Add Employee</button> <button type="button" className="btn btn-warning ml-2" onClick={ this.handleReset }> Reset </button> </div> </form> </div> ); }; } export default AddEmployee; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 import React from 'react' ; class AddEmployee extends React . Component { state = { name : '' , age : 0 , salary : 0 } //handle input changes inputChange = e = > { this . setState ( { [ e . target . name ] : e . target . value } ) ; } ; handleSubmit = e = > { console . log ( this . state ) ; e . preventDefault ( ) ; console . log ( 'fffff' ) ; if ( this . state . name . trim ( ) !== '' ) { this . props . onAddEmployee ( this . state ) ; this . handleReset ( ) ; } } ; handleReset = e = > { this . state = { name : '' , age : 0 , salary : 0 } } ; render ( ) { return ( < div > < form onSubmit = { this . handleSubmit } > < div className = "form-group" > < label htmlFor = "emaployeename" > Employee Name < / label > < input type = "text" className = "form-control" placeholder = "Employee Name" className = "form-control" name = "name" onChange = { this . inputChange } value = { this . state . name } / > < / div > < div className = "form-group" > < label htmlFor = "emaployeeAge" > Employee Age < / label > < input type = "text" placeholder = "Employee Age" className = "form-control" name = "age" onChange = { this . inputChange } value = { this . state . age } / > < / div > < div className = "form-group" > < label htmlFor = "emaployeeSalary" > Employee Salary < / label > < input type = "text" placeholder = "Employee Salary" className = "form-control" name = "salary" onChange = { this . inputChange } value = { this . state . salary } / > < / div > < div > < button type = "submit" className = "btn btn-primary ml-2" > Add Employee < / button > < button type = "button" className = "btn btn-warning ml-2" onClick = { this . handleReset } > Reset < / button > < / div > < / form > < / div > ) ; } ; } export default AddEmployee ;

Create handler method and static html form to get input from user.

Now, we need to import this AddEmployee.js file inside src/App.js file.

import React from 'react'; import CreateEmployee from './containers/CreateEmployee'; function App() { return ( <div className="container"> <div className="row"> <div className="col-md-6"> <CreateEmployee /> </div> </div> </div> </div> ); } export default App; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import React from 'react' ; import CreateEmployee from './containers/CreateEmployee' ; function App ( ) { return ( < div className = "container" > < div className = "row" > < div className = "col-md-6" > < CreateEmployee / > < / div > < / div > < / div > < / div > ) ; } export default App ;

Let’s run this react redux tutorial using npm start, if every thing fine, you will see add employee form.

Listing Component Integration With React Redux

Already, integrated add employee features with this react redux tutorial.Now, we will display all employee list into home page.

Create Smart Component For Employee List

We will EmployeeList.js file into components/ folder, this file will have employee data iteration logic and bind data with tr element.

import React from 'react'; import { connect } from 'react-redux'; import Emp from '../Employee'; function EmployeeList({ emps, onDelete }) { console.log(emps); return ( <div> {emps.map(emp => { return ( <Emp emp={ emp } key={ emp.id } /> ); })} </div> ); } const mapStateToProps = state => { return { emps: state.emps }; }; export default connect( mapStateToProps, mapDispatchToProps )(EmployeeList); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 import React from 'react' ; import { connect } from 'react-redux' ; import Emp from '../Employee' ; function EmployeeList ( { emps , onDelete } ) { console . log ( emps ) ; return ( < div > { emps . map ( emp = > { return ( < Emp emp = { emp } key = { emp . id } / > ) ; } ) } < / div > ) ; } const mapStateToProps = state = > { return { emps : state . emps } ; } ; export default connect ( mapStateToProps , mapDispatchToProps ) ( EmployeeList ) ;

Created Dumb Component For Employee List

We will create employee dumb component under app/Employee.js folder.This file will have static data with html elements.

import React from 'react'; export default ({ emp: { id, name, age, salary }, onDelete }) => { return ( <tr key={id}> <td>{ name }</td> <td>{ age }</td> <td>{ salary }</td> </tr> ) }; 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react' ; export default ( { emp : { id , name , age , salary } , onDelete } ) = > { return ( < tr key = { id } > < td > { name } < / td > < td > { age } < / td > < td > { salary } < / td > < / tr > ) } ;

Bind Employee List With Main Container

We will call employee list component into main app.js container.

... import EmpList from './containers/EmployeeList'; function App() { return ( ..... <table className="table table-bordered"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Salary</th> </tr> </thead> <tbody> <EmpList/> </tbody> </table> ... ); } export default App; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 . . . import EmpList from './containers/EmployeeList' ; function App ( ) { return ( . . . . . < table className = "table table-bordered" > < thead > < tr > < th scope = "col" > Name < / th > < th scope = "col" > Age < / th > < th scope = "col" > Salary < / th > < / tr > < / thead > < tbody > < EmpList / > < / tbody > < / table > . . . ) ; } export default App ;

Save the file and go to the http://localhost:3000/

If everything configured and coded fine then we can be able to add and display the employee.