[Dust] --- middleware --- Redux-promise-middleware --- [dust]

I. Origins of Middleware

 

A single State is stored in the store. to update a state, you must first initiate an action (through the dispatch function). Action is equivalent to a Message notification, it is used to describe what happened (for example, adding a todo), and the reducer will update the state according to the action, so that the view can be rendered based on the new state.

 

Of course, the above is only the case of synchronous action,If action is asynchronous (for example, obtaining data from the server), the situation is different. You must use the Redux middleware.

 

Official explanation:Redux middleware is a third-party extension provided between initiating an action and reaching the reducer. The middleware is used between action and store. Dispatch.

 

Ii. Redux-promise

The payload attribute of the action of store. Dispatch can be placed on the promise object.

 

Usage:

(1) Introduction

Import {createstore, applymiddleware} from "Redux ";

Import promisemiddleware from "Redux-promise-Middleware ";

 

(2) Add Middleware

Const store = createstore (CER, applymiddleware (promisemiddleware ()))

 

(3) Compile asynchronous action in action

Note: This asynchronous action will pass two types. The first is add_item_pending, and the second is add_item_fulfilled. When add_item_pending is used, we can create a loding animation, when add_item_fulfilled is used, we can load the data to the page.

 

(4) use in components

 

 

Address: https://github.com/pburtchaell/redux-promise-middleware

[Dust] --- middleware --- Redux-promise-middleware --- [dust]