Introduction to Redux.pptx
- 1. Introduction to Redux Kate Kilian || Full-stack JS Engineer
- 2. Background & Theory What’s the need for Redux, and why is it a useful solution?
- 4. The problem: How should one manage client-side state? Types of state to manage: ● Data-driven ● Communication-driven ● Controls (forms, per-view) ● Session React’s out-of-the-box setState() doesn’t work well for ALL state types
- 5. Other attempts to “solve” state-management Flux: Stores emit events; components must handle their own listening/updating. MobX: Provides stores, uses observables to get updates; has less boilerplate via decorators. “Pub-Sub”: Any component can publish an event and/or subscribe; all publishing and subscribing is managed by each component.
- 6. What types of apps does Redux work for? … where there’s state to manage! ● Single-page web applications (SPAs) ● Desktop apps via Electron ● React Native apps
- 7. Principles behind Redux’s architecture choices Single Source of Truth via Unidirectional Data Flow => all actions are consolidated by reducer => reducer handles changes to Redux state => predictable logic across app => data normalization (decreases likelihood of multiple copies of data) State is “Read Only” using Immutability => reducer returns a new state - no callbacks modifying state in place State is modified using Pure Functions => same inputs, predictable output
- 8. Major benefits of Redux Immutability enables new functionality: ● Timeline and time travel ○ Data goldmine! ○ Debugging with Redux Devtools/Logging ○ Better understanding of your app ○ Can send bug report ○ Hook into analytics ● Easier testing due to “pure functions” ● Enables clean diff-ing for component update Connect(): ● abstracts event listener logic ● Component receives data for specific parts of store Dispatch(): ● Calls reducer with the action passed to dispatch ● Used under the covers in mapDispatchToProps
- 9. Takeaway: In larger apps with more complexity, constraints help the app FLOURISH!
- 10. Project Setup How to begin using Redux in your app
- 11. … npm install is your friend React projects npm install redux npm install react-redux Other JS projects Angular: Ng-redux ng2-redux Vue.js: Vue-redux Vuedux
- 12. Redux Demo ● Store ● Provider ● connect() ● dispatch() ● Action creators ● Actions ● Reducers All the parts and how to use them
- 13. Gotchas What to watch out for ● Don’t mutate state in place ● Flatten state tree using normalizr
- 14. Thanks for listening! … and stay in touch Demo App & Resources https://github.com/katekilian/ react-redux-mini-bookreader Kate Kilian Twitter: @thequirkyquail Github: https://github.com/katekilian LinkedIn: http://linkedin.com/in/katekilian
- 15. … and when SHOULDN’T you use Redux? Static sites, where there’s no state to manage Situations where a view’s/component’s internal state doesn’t need to be broadcast to other components If you don’t agree with the philosophies and want more control with less “ceremony”