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