007. Redux middlewares
Download as PPTX, PDF2 likes678 views
This document discusses ReactJS Redux middleware. It explains that middleware allows you to extend Redux with custom functionality. Redux Thunk is mentioned as a middleware that lets you write action creators that return functions, to delay or conditionally dispatch actions. It also discusses using Axios and Redux-api together to make API calls from Redux actions and handle asynchronous logic. The document provides code examples of implementing middleware, making requests with Axios, and configuring Redux-api for API integration.
007. Redux middlewares
- 1. 007. REDUX MIDDLEWARE Presenter: Binh Quan
- 2. ReactJS - Redux Middleware Without middleware
- 3. ReactJS - Redux Middleware With middlewares
- 4. ReactJS - Redux Middleware With middlewares
- 5. ReactJS - Redux Middleware With middlewares
- 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. ReactJS - Implement middleware to Store Without middleware With middleware
- 8. ReactJS - Implement middleware to Store With middleware - method #1 With middleware - method #2
- 9. ReactJS - Implement middleware to Store With single middleware With multiple middleware
- 10. ReactJS - Redux Thunk Normal action Thunk action Thunk with conditional dispatch
- 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. 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. ReactJS - Poor Practice API call
- 14. ReactJS - Redux Practice API call
- 15. ReactJS - Using Axios React Component Redux Actions
- 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. ReactJS - Redux-api configuration Folder structures users.js
- 18. ReactJS - Redux-api configuration Folder structures axios.js
- 19. ReactJS - Redux-api configuration Folder structures posts.js
- 20. ReactJS - Redux-api configuration Folder structures index.js
- 21. ReactJS - Redux-api configuration Reducers (reducers/index.js) Chrome console log
- 22. ReactJS - Redux-api configuration Create store with API reducers
- 23. ReactJS - Redux-api configuration Dispatch an API action
- 24. ReactJS - Redux-api configuration Dispatch an API action
- 25. Next: Redux Saga
- 26. Now Demo