Embed Size (px)
Citation preview
007. REDUX MIDDLEWAREPresenter: Binh Quan
ReactJS - Redux Middleware
Without middleware
ReactJS - Redux Middleware
With middlewares
ReactJS - Redux Middleware
With middlewares
ReactJS - Redux Middleware
With middlewares
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
ReactJS - Implement middleware to Store
Without middleware
With middleware
ReactJS - Implement middleware to StoreWith middleware - method #1
With middleware - method #2
ReactJS - Implement middleware to Store
With single middleware
With multiple middleware
ReactJS - Redux Thunk
Normal action Thunk action Thunk with conditional dispatch
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
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
ReactJS - Poor Practice API call
ReactJS - Redux Practice API call
ReactJS - Using AxiosReact Component Redux Actions
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
ReactJS - Redux-api configurationFolder structures users.js
ReactJS - Redux-api configurationFolder structures axios.js
ReactJS - Redux-api configurationFolder structures posts.js
ReactJS - Redux-api configurationFolder structures index.js
ReactJS - Redux-api configuration
Reducers (reducers/index.js) Chrome console log
ReactJS - Redux-api configuration
Create store with API reducers
ReactJS - Redux-api configuration
Dispatch an API action
ReactJS - Redux-api configuration
Dispatch an API action
Next:Redux Saga
Now Demo
