Step by Step example on redux flow

 Requirements: 

Create two different components inside card. Component 1 is home component and component 2 is Name comp. Home comp having input text field with button name called Send. If user type in the text field and click on send button then in Name component same text field should appear.

Step1: Create Home component with following code.

import React, { Component } from 'react';

import Name from '../Name/Name.js';

import nameAction from '../../Actions/NameAction.js';

 class Home extends Component {

    constructor(props){

      super();

      this.state = {

        name: ''

      }

    }

    sendDataToAction=()=>{

      nameAction(this.state.name);

    }

  render() {

    return (

      <div className='container mt-5'>

          <div className='col'>

                <div className='card'>

                    <div className='card-header'>

                        <input type="text" onChange= {(e)=>{

                          this.setState({

                            name:e.target.value

                          })

                        }}/>

                        <button  className='btn btn-primary m-3' onClick={this.sendDataToAction}>Send</button>

                    </div>

                    <div className='card-body'>

                        <Name/>

                    </div>

                </div>

          </div>

      </div>

    )

  }

}

export default Home

 Step2: Create Name component with following code

import React, { Component } from 'react';

import {connect} from 'react-redux';

 class Name extends Component {

  render() {

    return (

      <div className='container mt-5'>

         <div className='row'>

         <div className='col'>

                <p className='display-5'>{this.props.storeData}</p>

          </div>

         </div>

      </div>

    )

  }

}

export default connect((storeData)=>{

  return {

    storeData: storeData.nameReducer.name,

  };

},null)(Name)

Step3: Create store with following code

import {createStore, combineReducers, applyMiddleware} from 'redux';

import logger from 'redux-logger'

import cityReducer from '../Reducer/CityReducer';

import nameReducer from '../Reducer/NameReducer';

 const cR =  combineReducers({

    nameReducer,

    cityReducer

})

 const myStore = createStore(cR, applyMiddleware(logger));

 export default myStore;

Step4: Create Reducers with following code

import userData from "../InitialData/InitialData"

const nameReducer = (state=userData, action) => {

    switch(action.type){

        case 'NAME':{

            state = {

                ...state,

                name:action.payLoad,

            }

        }

    }

    return state

}

export default nameReducer

Step5: Create initialdata 

var userData = {

    user : ''

}

export default userData

Important packages to be installed while redux pattern

1) npm install redux

it allows us to use  redux library

2)npm install react-redux 

It will give us provider component which is used to wrap the app component in index.js

3)  npm in redux-logger

It is used for developer to see the whats is there in store.