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