Using redux

Using redux

• 1.
  Using Redux Maximising developmentefficiency
• 2.
  Static websites Singe Page Applications complexity Refresh page LiveReload CSS time HMR (Hot ModuleReload) JS (stateless components) HMR JS (everything) Redux Why Redux is natural
• 3.
  Demo: Redux inuse 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 Statecontainer (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 traditionalFlux Action Reducer (Redux) Store ViewRedux Flux Data flow
• 8.
  Today’s example • Dispatchaction for new generate job • Update State via reducer • Receive State in Component
• 9.
  Action creatorAction ReducerStore View • Returns actions; does not dispatch them
• 10.
  • Write reducersinstead 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 StoreView
• 12.
  Redux StoreAction ReducerStore View
• 13.
  Provider Connect ViewAction ReducerStore Redux using react-redux Data flow with react-redux
• 14.
  (Store) Provider • Wrapswhole App Provider • Makes Store available to components Store
• 15.
  ConnectConnect • Injects props,subscribes to Store • Keeps components Dumb View
• 16.
  ConnectConnect View • won’twork - actionCreator does not dispatch action
• 17.
  ConnectConnect View • Connectauto-injects dispatch to props
• 18.
  Connect • 2nd paramcreates self-dispatching action functions Connect View
• 19.
  • write Reducersinstead 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