Introduction to State Management with Flux and Redux in JavaScript Apps
Explore the concepts of Flux and Redux for efficient state management in JavaScript applications, understanding their architecture, key components, and benefits in simplifying data flow. Dive into the unidirectional data flow pattern of Flux and the inspired improvements in Redux, alongside the comparison of their parts and functionalities for delivering business value through IT.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Flux your app via Redux Quick introduction of state management in JavaScript apps using Redux
Petar Blazhevski Front-end developer at Polar Cape @PetarBlazevski
History Facebook UI transition to components (React)
The problem: Data Flow MVC Bidirectional data flow. One change can affect the state of the app in many places Delivering Business Value through IT
What is Flux? Application architecture, or Pattern for managing data flow in an application Designed by Facebook Unidirectional data flow Flux Delivering Business Value through IT
The 4 parts of Flux View Displays the data, and enables user interactions with the app Action Single object that contains the payload. Must contain the type field Dispatch Receives actions and dispatches them to the store Store Stores the data. We can have multiple stores in an application Delivering Business Value through IT
What is Redux? Inspired by Flux Avoids it s complexity Doesn t have a real dispatcher Should contain only one immutable store Has the ability to be implemented in logging, hot reload, time travel, etc. Delivering Business Value through IT
The 3 parts of redux Actions Similar to Flux Actions Store Stores the application state Immutable object Only one store in application Reducers Takes the current state, performs simple actions, and returns new state Delivering Business Value through IT
