007. Redux middlewares

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