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.

Redux

 Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Redux is the official  UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries..

Redux: Redux is 3rd party library used for state management in the application. State management refers to deal with

data management. i.e. sharing the data between one component to another.

We have lot of techniques for sharing the data between components like 

props --- Used for transferring data from Parent to child only

callbacks  --- Used for transferring data from child to parent only

context API  --- Used for transferring data from Parent to child only

To overcome the above drawbacks , we have new concept called Redux. React did not introduced the redux concept whereas its 3rd party library.

How to implement Redux.

1) Create React app using react library

2) Create Redux store using redux library

3) To store the data from react app to redux store we can not do it directly

4) There is one special function called reducer , once the data avaliable to reducer then redux store will take it from reducer.

5)But component can not store data directly to reducer so there is one more function called Action. So component first store the data into Action then From Action it will goes to dispatch function and from dispatch it will gors to reducer.

To Create Redux Store

1) Install redux using npm install redux

2) using createStore() we can create redux store.

3) Make available this store to all components for that install react-redux

npm install react-redux

4) React-redux provides a compoenent called provider. 

5) We have wrap this <App/> component inside <Provider/>

6)<Provider/> component takes one default props called store