Redux principles in plain JavaScript

In this presentation I wanna share the things I've learned while building a Tic-Tac-Toe game using Redux principles in plain javascript. How store, actions and reducers can be implemented from scratch and how each of these concepts connect together in order achieve the unidirectional data flow approach.

Transcript

1. Redux principles in plain JavaScript @ramonvictor

2. Front-End Engineer at Recife, PE - Brazil
3. @ramonvictor
4. 1. What’s Redux 2. Vanilla JS case study 3. Going beyond 4. Learning resources Agenda
5. VIEW CONTROLLER MODEL USER
6. VIEW CONTROLLER USER COMP. COMP. COMP. COMP. MODEL MODEL MODEL MODEL
7. ACTION DISPATCHER USER STORE Flux May 2014 VIEW
8. Redux May 2015 ACTION DISPATCHER USER STORE VIEW @dan_abramov
9. Simple and scalable state manager
10. 3 key principles
11. Single source of truth
 1. ≈
12. 2. State is read-only ≈
13. Changes are made with pure functions 3.
14. Everything in 2kB
16. But, why not using only the principles?
17. Case study
18. View layer
21. Store
24. Reducers
27. What?
28. Unidirectional data flow
31. Multiplayer
32. Node.js ὑ socket.io
33. Demo!
35. Going beyond
36. Action Creators
38. STORE Middleware ACTION PREV_STATE REDUCERS NEW_STATE
40. Wanna know more?
47. • Redux is easy to test and debug • It fits with both simple and complex apps • It plays nicely with React, or any other view layer framework. Wrap up
48. Thanks! @ramonvictor