Muhammad1142
Uploaded by
20 SLIDES
0 VIEWS
0LIKES

Redux workshop _ PPT

DESCRIPTION

Introduction to redux<br>

1 / 20

Download Presentation

Redux workshop _ PPT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 25/06/2025,06:34 Reduxworkshop|PPT Search • UploadDownloadfreefor30days • Reduxworkshop • Apr25,2019•Downloadaspptx,pdf • 0likes•906views • AI-enhanceddescription M Saved IImran Follow Reduxisastatemanagement toolforJavaScriptapplications… Readmore https://www.slideshare.net/slideshow/redux-workshop/142088817

  2. 25/06/2025,06:34 Reduxworkshop|PPT Downloadnow o 1 f25 Downloaded42times 1 2 3 4 Mostrea 5 d 6 7 Mostread 8 9 10 https://www.slideshare.net/slideshow/redux-workshop/142088817

  3. 25/06/2025,06:34 Reduxworkshop|PPT 11 12 13 14 15 https://www.slideshare.net/slideshow/redux-workshop/142088817

  4. 25/06/2025,06:34 Reduxworkshop|PPT https://www.slideshare.net/slideshow/redux-workshop/142088817

  5. 25/06/2025,06:34 Reduxworkshop|PPT https://www.slideshare.net/slideshow/redux-workshop/142088817

  6. 25/06/2025,06:34 Reduxworkshop|PPT https://www.slideshare.net/slideshow/redux-workshop/142088817

  7. 25/06/2025,06:34 Reduxworkshop|PPT https://www.slideshare.net/slideshow/redux-workshop/142088817

  8. 25/06/2025,06:34 Reduxworkshop|PPT MoreRelatedContent What'shot(20) IntroductiontoReactJSforbeginners PPTX VarunRaj 21slides•5.7Kviews ReactJSpresentation PDF ThanhTuong 51slides•7.6Kviews Reactjs PPTX OswaldCampesato 79slides•4.4Kviews IntroductiontoReactJS ODP KnoldusInc. 14slides•3Kviews Reactjs PDF Rajesh Kolla 25slides•2.6Kviews https://www.slideshare.net/slideshow/redux-workshop/142088817

  9. 25/06/2025,06:34 Reduxworkshop|PPT ItstimetoReact.js PPTX RiteshMehrotra 19slides•4.4Kviews IntroductiontoReactJSforbeginners|NamespaceIT PPTX namespaceit 17slides•2.4Kviews IntrotoReact PPTX JustinReock 45slides•4.2Kviews Reactjs PPTX NehaSharma 27slides•12.6Kviews BasicsofReactHooks.pptx.pdf PDF KnoldusInc. 22slides•3.3Kviews ReduxToolkit-QuickIntro-2022 PDF FabioBiondi 45slides•1.4Kviews Reactjsprogrammingconcept PPTX Tariqulislam 29slides•2.3Kviews ReactJSandwhyit'sawesome PDF AndrewHull 132slides•108.3Kviews https://www.slideshare.net/slideshow/redux-workshop/142088817

  10. 25/06/2025,06:34 Reduxworkshop|PPT Introductionto react_js PPTX MicroPyramid. 16slides•2.2Kviews ReactJS-Aquickintroductiontutorial PPTX MohammedFazuluddin 15slides•8.6Kviews AnIntroductiontoRedux PDF NexThoughtsTechnologies 24slides•1.7Kviews Reacthooks PPTX SadhnaRana 19slides•545views React+ReduxIntroduction PPTX NikolausGraf 47slides•26.3Kviews ReactJsSimplified PDF SunilYadav 30slides•554views Reactjs PPTX AlirezaAkbari 9slides•977views SimilartoReduxworkshop(20) ReactReduxInterviewQuestionsPDFByScholarHat PDF https://www.slideshare.net/slideshow/redux-workshop/142088817

  11. 25/06/2025,06:34 Reduxworkshop|PPT Scholarhat 23slides•42views ReactReduxInterviewQuestionsPDFByScholarHat PDF Scholarhat 23slides•563views Redux PPTX AnuragChitti 13slides•146views Redux PPTX MaulikShah 28slides•154views anIntroductiontoRedux PPTX AminAshtiani 33slides•335views Introductionto Redux.pptx PPTX MohammadImran322154 15slides•19views U3-02-ReactReduxandMUI.pptxaSDFGNXDASDFG PPTX vinodkumarthatipamul 19slides•11views GettingstartedwithRedux js PPTX Citrix 23slides•516views Understandingreacthooks PDF https://www.slideshare.net/slideshow/redux-workshop/142088817

  12. 25/06/2025,06:34 Reduxworkshop|PPT Samundrakhatri 19slides•4.2Kviews downloads_introductiontoredux.pptx PPTX NavneetKumar111924 33slides•31views MateriModernReactReduxPowerPoint.pdf PDF exiabreak 41slides•17views ReduxLikeUs PPTX HeberSilva 14slides•54views React+Redux+TypeScript===♥ PPTX RemoJansen 21slides•12.8Kviews ReduxinAngular2+ PDF HùngNguyễnHuy 43slides•111views Reduxandcontextapiwith reactnativeappintroduction,use cases,implemen... PDF KatySlemon 46slides•166views Fundamental concepts ofreactjs PDF StephieJohn 14slides•129views ReactContextAPI PDF https://www.slideshare.net/slideshow/redux-workshop/142088817

  13. 25/06/2025,06:34 Reduxworkshop|PPT NodeXperts 16slides•1.6Kviews Workshop22:React-ReduxMiddleware PDF VisualEngineering 29slides•2.4Kviews Workshop22:ReactJSRedux Advanced PDF VisualEngineering 29slides•1.4Kviews ReactReduxAntDandUmijs PDF IsuruSamaraweera 20slides•2.3Kviews MorefromImranSayed(20) DockerwithWordPress PPTX ImranSayed 23slides•110views WhyProgressiveWebApps ForWordPress-WordCampFinland PPTX ImranSayed 81slides•189views Customgutenbergblock developmentinreact PPTX ImranSayed 71slides•938views https://www.slideshare.net/slideshow/redux-workshop/142088817

  14. 25/06/2025,06:34 Reduxworkshop|PPT Fastest WayofCreatingGutenbergBlocks-WordCampRochester PPTX ImranSayed 71slides•978views Harness The PowerOfACFForGatsbyandWordPress PPTX ImranSayed 34slides•1.4Kviews ImprovingYourDebuggingSkillsInWordPress PPTX ImranSayed 40slides•1.1Kviews BuildModernWebApplicationswithReactandWordPress PPTX ImranSayed 38slides•233views WhyprogressiveappsforWordPress-WordSesh2020 PPTX ImranSayed 80slides•1.1Kviews DiggingIntoGutenberg PPTX ImranSayed 54slides•1.3Kviews FastestWayOfCreatingGutenbergBlocksWithMinimal JavaScriptKnowledge... PPTX ImranSayed 77slides•1Kviews Whyprogressivewebappsforwordpress wc-ahemdabad PDF ImranSayed 73slides•581views https://www.slideshare.net/slideshow/redux-workshop/142088817

  15. 25/06/2025,06:34 Reduxworkshop|PPT Buildfastwordpresssiteinreactin30mins withfrontity PPTX ImranSayed 50slides•115views BuildFastWordPressSiteWithGatsby PPTX ImranSayed 76slides•1.3Kviews WhyProgressiveAppsForWordPress? PPTX ImranSayed 72slides•821views CreatingGutenbergBlocksWith ACF PPTX ImranSayed 67slides•2.8Kviews Customgutenbergblock development withReact PPTX ImranSayed 75slides•4.7Kviews SSRwithReact-Connecting Next.jswithWordPress PPTX ImranSayed 31slides•4.6Kviews ReactwithWordPress:HeadlessCMS PDF ImranSayed 35slides•287views ReactWorkshop:Coreconceptsofreact PPTX ImranSayed 43slides•313views https://www.slideshare.net/slideshow/redux-workshop/142088817

  16. 25/06/2025,06:34 Reduxworkshop|PPT IntroductiontoGutenberg-ImranSayed PPTX ImranSayed 56slides•1.2Kviews Recentlyuploaded(20) EnableYourCloudJourneyWithMicrosoftTrustedPartner|IFI Tech DOCX IFITechsolutions 3slides•23views Key Challenges inTroubleshootingCustomerOn-Premise Applications PPTX Tier1app 14slides•49views FromDataPreparationto Inference: HowAlluxioSpeedsUpAI PDF Alluxio,Inc. 22slides•77views SimplifyInsurance Regulations with ComplianceManagement Software PPTX InsuranceTechServices 9slides•12views DecipherSEOSolutionsforyourstartupneeds. PDF mathai2 8slides•35views FoundationsofMarketoEngage-Programs,Campaigns&Beyond- June2025 PPTX BradBedford3 33slides•60views NEW-IDMCrackwith InternetDownloadManager6.42Build27 VERSION PDF https://www.slideshare.net/slideshow/redux-workshop/142088817

  17. 25/06/2025,06:34 Reduxworkshop|PPT grete1122g 20slides•6views AdvanceDoctorAppointmentBookingAppWithOnlinePayment PPTX AxisTechnolabs 18slides•27views BuildingGeospatialDataWarehouseforGISbyGISwithFME PDF SafeSoftware 14slides•17views Y-Recursion The HardWayGopherConEU2025 PDF EleanorMcHugh 62slides•34views AGuidetoTelemedicineSoftwareDevelopment.pdf PDF OliveroBozzelli 9slides•40views UniversityCampusNavigationforAll-PeakofData&AI PDF SafeSoftware 47slides•10views On-DeviceAI:IsItTimetoGoAll-In,orDoWeStillNeedtheCloud? PDF HassanAbid 47slides•45views AutomatedTestingandSafetyAnalysisofDeepNeuralNetworks PDF LionelBriand 70slides•30views SysinfoOSTtoPSTConverterInfographic PDF https://www.slideshare.net/slideshow/redux-workshop/142088817

  18. 25/06/2025,06:34 Reduxworkshop|PPT SysInfoTools 1slide•20views Microsoft-365-Administrator-s-Guide1.pdf PDF mazharatknl 83slides•17views DigitalTransformation:Automating thePlacementofMedical Interns PDF SafeSoftware 19slides•12views BestPracticeforLLMServingintheCloud PDF Alluxio,Inc. 7slides•104views HumansvsAICallAgents-Qcall.ai'sSpecialReport PDF UditGoenka 16slides•9views HYBRIDIZATIONOFALKANESANDALKENES... PPTX karishmaduhijod1 17slides•29views Reduxworkshop • IntroductiontoRedux • Redux2●Reduxisastatemanagementtoolforjavascriptapps.●Allowsyoutosharethestatebetween components • Redux3StoreReducersActionsState●ItintegratesnicelywithReact. Canuseitwithanyotherviewlibrary.It allowustotrackchanging data.●It’sprettysimilartocomponentstate • Whyuseredux?●Whenwe havebigcomplicateddataforcomplexapplications.●Anycomponentcanpullany pieceofdatafromthereduxstore.Sodataneedstobesharedbetweenmultiplecomponents●Helpsyouwrite applicationsthatbehaveconsistently.●Runindifferentenvironments(client,server, andnative),and are easytotest • Providesagreatdeveloper experience,suchaslivecodeeditingcombinedwithatimetravelingdebugger.●Reusing https://www.slideshare.net/slideshow/redux-workshop/142088817

  19. 25/06/2025,06:34 Reduxworkshop|PPT thecomponentsbecausetheynolongeraredependenttogetthepropsfromtheirparents,theycanallgettheirstate valuesasprops,fromasinglereduxstore4 ActionsReducersStoreState5Triggersanaction Create &DispatchanActionUpdatesstorewithnewstatebased onactiontypeDefines Actions&ActionCreators●Actionsarekindofevents.Andtheyarejustobjects.●Actionslooklikethis:●Instead ofwritingthemourselves we canwraptheminsideafunctionthatreturnsthisactionobject.Andthisfunctionis calledActionCreators.Soactioncreators createactions.6 ActionCreators●Actioncreators(functionsthatreturnaction object )makeyourjobeasierwhenyouneedto dispatchthesameactionatmultipleplaces●Oneactioncantriggermultipleside-effects,dependingonhowmany reducersconsumethataction,bycheckingaction.typeandreturninganewstate ●Inthebelowexampleaction creatorsdispatchesasynchronousaction.Ifyouwanttodispatchasynchronousactions,youneedtousereduxthunk 7 Middlewares●Amiddlewareissomecodeyoucanputbetweentheframeworkreceivingarequest,andthe frameworkgeneratingaresponse●PeopleuseReduxmiddlewareforlogging,crashreporting,talkingtoan asynchronousAPI,routing,andmore.Examples redux-thunk,redux-loggeretc.8 ReduxThunk●Reduxthunkisamiddleware,thatlooksateveryactionthatpassesthroughthesystemandif itsa functionit calls that function. 9 ReduxThunk●WithaplainbasicRedux store, youcanonlydosimplesynchronousupdatesbydispatchingan action.●Middlewareextendthestore'sabilities,and letyou write asynclogicthatinteractswiththe store.●Sowith redux-thunkyoucanhandleasynchronousactions, rather thansynchronousactions.10 Synchronous Actions 11 AsynchronousActions(withthunk)12 ReduxLogger●DisplayprevState,nextStateandactionintheconsoleLog,everytimeanactionisfired.●npmi-D redux-logger13 Reducers●Reducerstakeaninitial State,create anew statebasedontheaction.typeandtheupdatetheredux storewiththenew state. ●Itmustreturnanewstate14 ReduxStore●Storeprovidesauniversaldatastorage.●You can createreduxstoreusing createStore().Wemust passreducerasitsfirstparameter.Ittakesanoptionalsecond parameteras‘intialState’andanoptional‘middleware’ whichallowsustopassmultiplemiddlewareslike‘thunk’,‘redux-logger’etc.15 ReduxStore●WecanthenwrapourmaincomponentinsideProviderandpassourreduxstoreintoit,soany componentcanaccessredux store.●AnycomponentinsideProvidercanalsodispatchanaction.16 Connect●Connectisahigherordercomponent,thatcantakeuptofourparameters.Allareoptional. https://react-redux.js.org/api/connect#connect-parametersconnect(mapStateToProps?,mapDispatchToProps?)● mapStateToProps:isafunctionthatgivesyouthestorevaluesaspropsforyourcomponent.Ittakesstore’s stateas paramandreturnsanobjectwhichgetsaddedaspropsforyourcomponent.17 Connect●mapDispatchToProps:canbeafunction(thatreturnsan object )oranobject.Ifthisparameterisnot passed,thenyourcomponentwill receive‘dispatch’ bydefault. ●Eachpropertyofthereturned objectshouldbea function,thatdispatchesanaction●PassingmapDispatchToPropsasafunction●PassingmapDisptachToPropsas Object:HerefetchPostsisaactionCreator(function)thatwehaveimported,thatdispatchesanaction.18 Connect●The returnofconnect()isawrapperfunctionthattakesyourcomponentandreturnsawrapper componentwiththeadditionalpropsthatitinjects. ●Howeveritdoesnotchangeyourcomponent,itjustreturnsa newcomponentwithpropsinjectedinit.●https://react-redux.js.org/api/connect#connect-returns19 When touseConnect?●Therecanbetwotypesofcomponents:1.SmartComponent2.DumbComponent● SmartComponentsaretheoneswhichuseconnect(),takethestoredataaspropsusethemforthemselvesandthen canpassittoDumbComponentsdowninthe tree.●Youshouldavoidpassingpropstomultiplelevelchild Componentsasitwouldalsomakethemhardto test.20 ActionsReducersStoreState21TriggersanactionDispatchAction (type&payload )Updatesstorewithnewstate basedonactiontypeAction:(type&payload)prevState&ActionDefines https://www.slideshare.net/slideshow/redux-workshop/142088817

  20. 25/06/2025,06:34 Reduxworkshop|PPT 22TriggersanactionDispatchAction (type&payload )UpdatesstorewithnewstatebasedonactiontypeAction: (type&payload)prevState&ActionDefines Steps23●Createareducerandreturnstatebasedonactiontype( optional:combinereducer )●Create(return) anactionusingactioncreator●Createastoreandpassthereducer ( optional:addmiddleware ) ●Calltheaction creator usingstore.dispatch(actionCreator())(Ifnotreact)AdditionalstepsForReact,●Wrapyourcomponentinside Providerandpassstore●ConnectyourReact withredux:connect(mapStateToProps)(Compo)●CallactionCreator usingthis.props.dispatch(actionCreator) DifferencebetweenComponentstate&Store stateComponentState =Acomponentstate canbechanged=State ismanagedwithinacomponentandcanonlybepassedaspropswithatoptobottomdataflow-Statevaluecan change,andthenrenderfunctioniscalled..ReduxStore state -Areduxstore state isimmutable.Soreducersnever changesthestatebut create anewstateeachtimeandupdatesthestore-Anycomponentcanaccessit=Reducer updatesthestorewithanewstatewhenanactionisdispatched.24 25 Thanks!Anyquestions?@imranhsayed@imran_.sayed Download CookiePreferences AboutSupportTermsPrivacy Donotsellorsharemypersonalinformation Copyright English ©2025SlideSharefromScribd https://www.slideshare.net/slideshow/redux-workshop/142088817

More Related