Home page ih no tatn ¢¢ byld ) } : f App js. Sq t f {| <1} Hello user poge is here This is atta, F is fname} bout user inf formoton <| p H l ) aT [ —fxport_defoult User . | App. < Route path =" / Users: ReMme” Com ponen}= fuserRh cute ee ee | Borie vor 1 iz Fagenot i> 2th dila st sie, cfine Yay panes Avtes) npm install| 5. State Management using Kedux (ser —'6n logloq | CRreact - Redux) > Component Type | E ——— class Function | component component I this. stote =f Lusestste {| count 04 t ss "const Fstote. setStote] = he Tes usestote (5 Parent _cornponent pass the data to child component | using props or, tote. | pedux ic aged “fos store poi enagemenk: I Tr con used ith other longuoges also. | Redux defination :’ [ Redux is _@ predictable stoke menagement for JS app)? Example: Cake_Shop Enh He: I D+ Shop - stores cake on @ shelf L 5). Shopkeeper ~ At tne front of the shore »). Customer - At the entrance of stor | Activites : | 4h ): Gistomer - Buy _ coke I 2. Shopkeeper __Cake shop scenorio Redux Purpese d - 1). Shop Store Holds the ctate of your I opp)? |: tntroduction_or Action Described whet happen _llecion uy o coke lection _ €3: Shopkeeper Reducer __Ties_the sto ocHon together The reducer which actually carry out the transi hon depending onthe action | Three principles of Redure + : !. The date of You whole app)? jis stored j On obj. tee within a ingle store SN eg : noOfcokes ‘105 4 a J 2: The only way +s change the state is tz) emit an action on object desgeribing: sphot--hoppen | - | J } e-g. Cake Shop f type: Buy. cake; 3: To ‘specify how. the state tree jg transform | by actio jou. ducer eg. const reducer = ( stote action) > f wide Cackon. type) { i oT Ss object case Buy Cake + return. | bs tear ao neoOfcakes : State. nodfcakes -I:mas cetion ie o object - Const ivy. Cape =' ee [yeu con create court ple Shion ; achons tn one ota - ; tol) Redux Architecture + . re Then ~subseri-bed- a | eee satey OF | 35 App. = J Dispotch : App!” con't 1 / Redux slore, — directly updale state aehaa \ (state) | I in - I Re ducer |e | | | #! React UT Architecture : | r l L a B rf | “dispatch “at | Redux | T [Wander | stere spot function | I Ii l onclick Opiate Reducer] | br | Updote the T fx loyer Site of Store Button J # || Hements ; ! Action : The on ; Carry some j - 0 sane infamalion Soe Ea Ny wo Ny ere eTown eg—_____They__hove_+ype _propert type ef actien fseing performed chihe achan It _is_clefined string constant. action Gunton : const Buy coke =’ Buy Coke’ 5 txomole: Lune i Kon buy foke © return 5 type: Buy. ke info + first redux ochon' 2: Reducer It specify te __actien send 4o the shore . These function arguments 2 how the opp state changes return the next otote of the appl’. Ervomple i cons} jnitialStote = f % const noOfcores = 10; reducer = ( 6tate fun clon = inittalstote ; acton)= that occepts store: 2 ‘action as - + | | | 1 £ ebject_ property ! witch (achion. +4 pe) a i Zz ockon i | case Buy coke + return noofcakes : State -noofcakes ~ PY YY spysyyssywssyyvyqo install reduy in nade aes react = | ppm instal! redux aej is Imporl Pedus tram redux? default <= return stote 3: Store : This_port_brings action 4 reducer together. > Create one store for the entire appl” ' I Pesponsibilities = “Hold appt? stote - (initial ssate) 2- Allow access fo tote +h” getstaten 3: To allow access to stote to be yodoted i through dispatch (ockon) for anu acoi siote. j 4 To register listener through Susscrsa( listener) Function Example : | const redux = require (+ redux:) Const cresteStore = redux- createStore const Gtore = creoteStore Creducer) j conzole.log CtiniHalStete ' | Store. getsiote 0) 319 Store. Subscribe (0 =? console-log (‘Update state: Store getstatem) 5 Store. dispatch ( buyCaket>) ; 2 Store-dicpatch ( buycakeo); — $§