Redux & Redux Toolkit

As per above digram- component hierarchy, App is the root one.

let us consoder component E, it has one variable whose state we need to transfer to Component D. We can do it by

1. transferring state to C, then to A and finally to D

let us consoder component E, it has one variable whose state we need to transfer to Component I. We can do it by

1. transferring state to C, then to A -> App ->B-->H--->I

we need to traverse the hierachy to transfer state , it reduces performance. so this is where Redux come into place.

Redux has store component which store the state of component , this store component can be subscribed by n no of component who want that state. Thus any changes in the state of a component will be set in Redux Store and Redux Store will tranfer that state to its subscribed component.

Principles Of Redux Pattern

==

create react app with below command

install redux packages

npm install redux react-redux

let us add product component- function based component

Add this componenet to app.js

let us add redux folder-product folder-action

create ActionType.js as below

create Reducer- ProductReducer as below

create store.js as below

goto app,js and inport provider and include provider store as below

provider is global one.

in store.js, we are using legacy store ,instead we will use latest store which is provided by redux toolkit, so install it

once installed, we will make use of latest store -cratestore as below

Now we need to create subscribe and dispatch so that we can complete redux flow.

edit productcontainer.js ,will add fucntion which accept state as input and convert it to object. this obejct value is being used as props in component.

will add one more function that represent dispatch ,accept dispatch as input and return function which initiate action

now we will use redux connect functionality to connect subscribe and dispatch action, import connect from react-redux as below

now we will call click event on make order button and call dispatch function on props as below

when click on makeorder,