React Redux

 Redux:

Reudux is predictable state container for javascript apps.

1 its library for javascript apps[can use react angular viewjs]

2.its state container

3.in redux,all state transitions are explicit and it is 

possible to keep track of them.//or the changes in the state is predictable.

The data in react always

flows from parent to child component

which makes it unidirectional

parent to child flow

not

child to parent

so we can work with prop drilling

the data stroe into app.js

so we have to pass from one to another

or

context APi,use Context in react hooks

/useReducer hooks

........................................

Redux is state management library with java script

we can use it with react angular vue and vanilla js

for state management

why need

user change one part of ui

then data has to change in other part of ui immediately

sync 

state management solutions

[flux :facebook]

one store for  all application state(Store) synchronized easy

like its database

if you update data so update in store

Redux:

centralizes application's state

make data flow transparent and predictable

easy debugging 

Like add cart

all the data is sync

 food delivery application

redux dev tool:for debuging redux appliction tool in chrome

event action.... deispatcher().. store ..  reducer event handler....store

steps:

design the store

define the actions

create a reducer

string is serializable 

no is not describable

so action is type:

 Action:what to do increment or decrement

describes what happend

its object have a type field(prperty) that

indicates the type of action being performed

type property is string constant

+and - both 2 action

what to do

what happend

the only way your application can interact with the store

action creator() pure function which creates

an action

or returns an action

reusable 

Reducer:useReducer hook

function that take the current state and an action

as arguments and return a new state

//(previousState,action)=>newstate :---reducer means 

ties the store and action together

contains state and action

specify how the app state changes in response to actions

sent to the store

store:

one store for the entire application

holds the state

object which holds the state of the application

store inside

function:

createStore()

dispatch(action) allows state to be upadate

getstate() allows acces to the state

subscribe():registers listeners

redux store brings together the state

actions and reducers

we will have a single store in a Redux application

npm i redux react redux

1stprogram:--

import React, { Component } from 'react';

import { createStore } from 'redux';

export class RE1 extends Component {

  render() {

      

    //action:

function Increment(){

  return {

    type:Increment

  }

}

function Decrement(){

  return {

    type:Decrement

  }

}

    const initialState={

                        count:0,

                        info:'Redux action'

                       };

    

    const reducer=function

(state=initialState,action){

      switch(action.type){

        case  Increment:

          return{

                 ...state,//copy of state object if no of state

                 count:state.count+1

                }

        case Decrement:

          return{

                 ...state,

                count:state.count-1

                }

        default: return state;

          }

        }

   

   

  const store=createStore(reducer

    ,window.__REDUX_DEVTOOLS_EXTENSION__ 

&& window.__REDUX_DEVTOOLS_EXTENSION__()

    );

  //accepts reducer function and getstate

console.log("initialstate:",store.getState());

store.subscribe(()=>{

    console.log("store is now updated",

store.getState());

})

//store.dispatch(Increment())

//store.dispatch(Decrement())

  

  return <div> 

      test

<button onClick=

{()=>store.dispatch(Increment())}>click1</button>

<button onClick=

{()=>store.dispatch(Decrement())}>click2</button>

  </div>;

  }

}

export default RE1;

2nd program:--

Middleware:

its way to extend redux with

custom functionality

extra feature with redux

provides a 3rd party extension

point b/w dispatching an action

and the moment it reaches the

reducer

middleware use:

logging,crash reporting

performing asysnchronous task

etch

1.middleware:

redux logger

https://www.npmjs.com/package/redux-logger

import React, { Component } from 'react';

import { applyMiddleware,createStore } from 'redux';

import { createLogger } from 'redux-logger';

export class RE3 extends Component {

  render() {

      

    const logger = createLogger();

    //action:

function Increment(){

  return {

    type:Increment

  }

}

function Decrement(){

  return {

    type:Decrement

  }

}

    const initialState={

                        count:0,

                        info:'Redux action'

                       };

    

    const reducer=function(state=initialState,action){

      switch(action.type){

        case  Increment:

          return{

                 ...state,

                 count:state.count+1

                }

        case Decrement:

          return{

                 ...state,

                count:state.count-1

                }

        default: return state;

          }

        }

   

   

  const store=createStore(reducer,

    applyMiddleware(logger)

        );

  //accepts reducer function and getstate

console.log("initialstate:",store.getState());

store.subscribe(()=>{

    console.log("store is now updated",store.getState());

})

//store.dispatch(Increment())

//store.dispatch(Decrement())

  

  return <div> 

      test

<button onClick={()=>store.dispatch(Increment())}>click1</button>

<button onClick={()=>store.dispatch(Decrement())}>click2</button>

  </div>;

  }

}

export default RE3;

3rd program:--