Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop 22: ReactJS Redux Advanced

793 views

Published on

Workshop React - Redux: Middleware / Higher Order Components

Presentado por ingenieros Enrique Oriol y Alex Adrià

Published in: Software
  • Be the first to comment

Workshop 22: ReactJS Redux Advanced

  1. 1. Front End Workshops Redux Advanced Enrique Oriol eoriol@naradarobotics.com Alex Adrià aadria@visual-engin.com
  2. 2. Previously in ReactJS... ReactJS Basics 1. Decompose UI into reusable components which render to virtual DOM 2. ReactJS will sync VDOM to real browser DOM 3. JSX format 4. Can render on client and server
  3. 3. Previously in ReactJS... Redux PATTERNS FLUX CQRS EVENT SOURCING PRINCIPIOS SINGLE SOURCE OF TRUTH READ-ONLY STATE CHANGES WITH PURE FUNCTIONS
  4. 4. Previously in ReactJS... Redux React Action Creator Action Reducers State Calls Returns Sent to Creates new Sent to
  5. 5. Previously in ReactJS... React-router React History React router
  6. 6. Higher Order Components (HOC)
  7. 7. What is a HOC? ● It is a JavaScript function which is used for adding additional functionality to existing component ● A takes an existing component and returns another component that wraps it. ● If the HOC data changes, It will re-run again and update the resulting component. ● It usually contains reusable common behaviours resulting in simpler and better structured components. ● A component can be wrapped several times by multiple wrappers.
  8. 8. Decorator Pattern
  9. 9. Decorator Pattern
  10. 10. export default function(ComposedComponent) { class HOCExample extends Component { componentDidMount() { this.setState({data:'Data from HOC...'}); } render() { return <ComposedComponent {...this.props} {...this.state} />; } } return HOCExample; } HOC structure example
  11. 11. Redux Middleware
  12. 12. What is middleware Provides capability to put CODE between dispatching an action and reaching the reducer.
  13. 13. Basic redux life-cycle React Action Creator Action Reducers State Calls Returns Sent to Creates new Sent to
  14. 14. Redux life-cycle with middlewares Middleware React Action Creator Action Reducers State Calls Returns Sent to Forwards action to Creates new Sent to Middleware receives the action and can log stop and modify it
  15. 15. Middleware benefits COMPOSABLE INDEPENDENT
  16. 16. Middleware stack example 1 Middleware # 1 I don’t care about this action, I’ll send it to the NEXT middleware Action Creator Action Reducers next Middleware # 2 I will log this action, and move it forward Middleware # 3 I don’t care about this action, I’ll send it to the NEXT middleware next console.log()
  17. 17. Middleware structure ● It is a function that receives the store ● It MUST return a function with arg “next” ● That returns a function with arg “action” ○ Where we do our stuff ○ And return ■ next(action) ■ state.dispatch(action)
  18. 18. export default function(store){ return function(next){ return function(action){ //do something //use next(action) or //state.dispatch(action) } } } Middleware structure ES 5 middleware declaration
  19. 19. export default store => next => action => { //do something //next(action); or state.dispatch(action); } } Middleware structure ES6 export default ({dispatch}) => next => action => { //our stuff } } src/middleware/myMiddleware.js In case we don’t need the store
  20. 20. Middleware C’MON MAN! GIVE ME an EXAMPLE!!
  21. 21. Simplest example - logger Middleware REACT IncreaseCounter() INC_ACTION ReducersSTATE - counter Forwards action to Component counter + - DecreaseCounter() DEC_ACTION Update state counter logger
  22. 22. Using our middleware import {createStore, applyMiddleware } from 'redux'; import reducers from './reducers'; import MyMid from './middlewares/my-middleware'; const createStoreWithMiddleware = applyMiddleware(myMid)(createStore); ReactDOM.render( <Provider store={createStoreWithMiddleware(reducers)}> <App /> </Provider> , document.querySelector('.container')); src/index.js
  23. 23. Modify action middleware workflow Middleware that modifies specific action Is it the action that I want? Action Creator Action no yes Send action forwards Next middleware Do some stuff Create new action with the results Action Middleware stack next(action) store.dispatch(newAction)
  24. 24. Middleware CAN YOU SHOW ME SOME CODE?
  25. 25. Dispatch action example - superstitious counter Middleware REACT IncreaseCounter() INC_ACTION ReducersSTATE - counter Forwards action to Component counter + - DecreaseCounter() DEC_ACTION Update state counter logger superstitious
  26. 26. Popular middlewares redux-promise redux-thunk Redux-logger Remember: npm install --save package
  27. 27. Thanks for your time! Do you have any questions?

×