Using redux
10 likes3,402 views
The document discusses the use of Redux as a predictable state container for single-page applications, highlighting its advantages such as immutable state management, modular design, and support for hot module reloading. It provides insights into the differences between Redux and traditional Flux architectures, including the role of actions and reducers. Additionally, it lists recommended packages and resources for learning more about Redux, as well as practical implementation examples.
Using redux
- 1. Using Redux Maximising development efficiency
- 2. Static websites Singe Page Applications complexity Refresh page LiveReload CSS time HMR (Hot Module Reload) JS (stateless components) HMR JS (everything) Redux Why Redux is natural
- 3. Demo: Redux in use criticalcss.com
- 4. Performance, tooling, React Penthouse - critical css generator About me @pocketjoso pocketjoso Jonas Ohlsson - front end developer https://jonassebastianohlsson.com
- 5. • Redux - overview • criticalcss.com redux usage in practice This talk
- 6. • Predictable State container (evolution of Flux) • One single immutable State • Reducers instead of Stores • Hot Module Reloading and Time travel • Modular, tiny (2kb!) • Follows Best practice What is Redux
- 7. Redux vs traditional Flux Action Reducer (Redux) Store ViewRedux Flux Data flow
- 8. Today’s example • Dispatch action for new generate job • Update State via reducer • Receive State in Component
- 9. Action creatorAction Reducer Store View • Returns actions; does not dispatch them
- 10. • Write reducers instead of Stores • Pure functions • (state, action) => newState https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Reducers
- 11. ReducerAction Reducer Store View
- 12. Redux StoreAction Reducer Store View
- 13. Provider Connect ViewAction Reducer Store Redux using react-redux Data flow with react-redux
- 14. (Store) Provider • Wraps whole App Provider • Makes Store available to components Store
- 15. ConnectConnect • Injects props, subscribes to Store • Keeps components Dumb View
- 16. ConnectConnect View • won’t work - actionCreator does not dispatch action
- 17. ConnectConnect View • Connect auto-injects dispatch to props
- 18. Connect • 2nd param creates self-dispatching action functions Connect View
- 19. • write Reducers instead of Stores • keep Components dumb using Connect • benefit from: • Hot Module Reloading • Powerful DevTools • Components easier to understand and test Summary
- 20. That’s all!
- 21. Recommended packages • Redux - https://github.com/rackt/redux • React transform boilerplate (for Hot Module Reloading) - https://github.com/gaearon/react- transform-boilerplate • Redux DevTools - https://github.com/gaearon/redux-devtools Redux resources • Redux release and intro to Time travel - https://www.youtube.com/watch?v=xsSnOQynTHs • Best starting point for understanding redux - Free video tutorial on Redux by Dan Abramov (creator) - https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree • Written notes for above video tutorial - https://gist.github.com/diegoconcha/ 8918294bb9df69876b22 • Official docs (great) - http://rackt.org/redux/index.html • Redux slim in a gist - https://gist.github.com/gaearon/ffd88b0e4f00b22c3159 Resources
- 22. Redux related resources • Full stack Redux tutorial - http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html • Redux for state management - http://konkle.us/state-management-with-redux/ • Full stack Redux boilerplate - https://github.com/erikras/react-redux-universal-hot-example • Support for Functional Components in React Transform -https://github.com/gaearon/babel-plugin- react-transform/issues/57 • Beyond just Redux for async actions - riadbenguella.com/from-actions-creators-to-sagas-redux- upgraded Other related resources • Webpack (react docs) - https://christianalfoni.github.io/react-webpack-cookbook/index.html • Functional Stateless Components - http://tylermcginnis.com/functional-components-vs-stateless- functional-components-vs-stateless-components/ • https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f Resources