Make you a redux for fun and profit

Unidirectional data flow has been all the rage these past years – mostly thanks to libraries like React that use it heavily. But it is a bit of a counter-intuitive pattern of work, so this presentation aims to demystify why and when it’s actually needed and to explain all the strange words (dispatcher, reducer, store) that are used within it by making a simple implementation in TypeScript from scratch.

Transcript

1. Nov 17, 2018 Sofia var title = “Make you a Redux for Fun and Profit !!”; var info = { name: “Wekoslav Stefanovski”, position: “Head of development”, company: “Sourcico”, country: “Macedonia”, twitter: “@swekster”, };
2. Nov 17, 2018 whoami(); Head of Development in Sourcico Macedonia Coding professionally since last century I love programming, I love programmers Long and fruitful love / hate relationship with JavaScript Prodigiously lazy, so very few slides Wekoslav Stefanovski @swekster
3. Nov 17, 2018 agenda(); • Words of caution – use at own risk • A simple and basic Angular application • Designing a simple state-holding service • Using the Redux / Flux pattern • Integrating the application Wekoslav Stefanovski @swekster
4. Nov 17, 2018 Thanks to our Sponsors: General Sponsor: Gold Sponsors: Technological Partner: Hosting Partner: Silver Sponsors: Lunch Sponsor: Innovation Sponsor: Bronze Sponsors: Infotainment Sponsor:
5. Nov 17, 2018 DEMO Passing data between components in a two-directional way
6. Nov 17, 2018 Two-way communication problems • Mandatory tight coupling between parent and child • Intermediate property passing • State is all over the place • What to do? Is there a solution? Wekoslav Stefanovski @swekster
7. Nov 17, 2018 Unidirectional data flow to the rescue Wekoslav Stefanovski @swekster
8. Nov 17, 2018 Unidirectional data flow to the rescue • Unique data storage that holds the "one true value" • Components are only allowed to get a glimpse at the holy data Wekoslav Stefanovski @swekster
9. Nov 17, 2018 DEMO Building a state management service
10. Nov 17, 2018 Unidirectional data flow to the rescue • Unique data storage that holds the "one true value" • Components are only allowed to get a glimpse at the holy data Wekoslav Stefanovski @swekster • So how do we modify the data then? • By changing it directly? • How will the other guys find out we've changed it?
11. Nov 17, 2018 Unidirectional data flow to the rescue • Unique data storage that holds the "one true value" • Components are only allowed to get a glimpse at the holy data Wekoslav Stefanovski @swekster • Components are not allowed to change the data • But they can tell the store to do it for them • Any change in state notifies interested parties
12. Nov 17, 2018 DEMO Building a state management service
13. Nov 17, 2018 Takeaway Wekoslav Stefanovski @swekster • Very easy to make a two-way mess • Redux / Flux is a powerful tool for a simpler data-flow • Very easy to make a one-way mess • Redux is not a silver bullet • Thing about what data you need where, and how to get it there
14. Nov 17, 2018 Questions? Comments? Criticisms? @swekster
15. Nov 17, 2018 Thanks to our Sponsors: General Sponsor: Gold Sponsors: Technological Partner: Hosting Partner: Silver Sponsors: Lunch Sponsor: Innovation Sponsor: Bronze Sponsors: Infotainment Sponsor: