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.

007. Redux middlewares

Redux middlewares

  • Login to see the comments

007. Redux middlewares

  1. 1. 007. REDUX MIDDLEWARE Presenter: Binh Quan
  2. 2. ReactJS - Redux Middleware Without middleware
  3. 3. ReactJS - Redux Middleware With middlewares
  4. 4. ReactJS - Redux Middleware With middlewares
  5. 5. ReactJS - Redux Middleware With middlewares
  6. 6. ReactJS - Redux Thunk ❖ Allows you to write action creators that return a function instead of an action. ❖ Used to delay the dispatch of an action ❖ or to dispatch only if a certain condition is met Package name: redux-thunk Github: https://github.com/gaearon/redux-thunk
  7. 7. ReactJS - Implement middleware to Store Without middleware With middleware
  8. 8. ReactJS - Implement middleware to Store With middleware - method #1 With middleware - method #2
  9. 9. ReactJS - Implement middleware to Store With single middleware With multiple middleware
  10. 10. ReactJS - Redux Thunk Normal action Thunk action Thunk with conditional dispatch
  11. 11. ReactJS - HTTP Clients fetch axios Github: https://github.com/mzabriskie/axiosGithub: https://github.com/github/fetch Get JSON content Send POST data Get JSON content Send POST data
  12. 12. ReactJS - HTTP Clients Benefits of Axios over Fetch # Feature Axios Fetch 1 Allow data transforming before request is made YES NO 2 Interceptors: Alter request or response YES NO 3 XSRF protection YES NO 4 Allow aborting a request YES NO 5 Request timeout support YES NO 6 Safari support YES With Polyfill 7 Upload progress support YES NO
  13. 13. ReactJS - Poor Practice API call
  14. 14. ReactJS - Redux Practice API call
  15. 15. ReactJS - Using Axios React Component Redux Actions
  16. 16. ReactJS - Redux API ❖ redux-thunk itself doesn’t implement any HTTP Client ❖ Generate actions and reducers for making AJAX calls to API endpoints ❖ Github: https://github.com/lexich/redux-api
  17. 17. ReactJS - Redux-api configuration Folder structures users.js
  18. 18. ReactJS - Redux-api configuration Folder structures axios.js
  19. 19. ReactJS - Redux-api configuration Folder structures posts.js
  20. 20. ReactJS - Redux-api configuration Folder structures index.js
  21. 21. ReactJS - Redux-api configuration Reducers (reducers/index.js) Chrome console log
  22. 22. ReactJS - Redux-api configuration Create store with API reducers
  23. 23. ReactJS - Redux-api configuration Dispatch an API action
  24. 24. ReactJS - Redux-api configuration Dispatch an API action
  25. 25. Next: Redux Saga
  26. 26. Now Demo

×