Redux异步数据流——redux-thunk的使用......20200327

默认情况下，creatStore()所创建出来的store只支持同步数据流。
有些时候，我们期望在action中有异步操作，比如发送请求，等请求结果回来之后再去修改state。要实现这个功能，我们需要借助第三方的中间件来完成：Redux-thunk中间件

//1.安装redux-thunk中间件
yarn add redux-thunk

//2.在创建store的时候挂载中间件。
/*一旦这个中间件被挂载之后，就允许我们在action的创建函数中返回一个函数，这个返回的函数会交
由redux-thunk中间件来处理*/
import thunk from 'redux-thunk'
import {createStore,applyMiddleware} from 'redux'
let store = createStore(reducer, applyMiddleware(thunk))

//3.编写异步的action
/*一旦我们使用了redux-thunk中间件之后，就允许我们在action的创建函数中返回一个新的函数
此时这个返回的函数会交给redux-thunk中间件来处理，在这个返回的函数中可以发送网络请求、
可以有异步操作、可以有副作用*/
export function addAsync() {
    return dispatch=>{
        setTimeout(() => {
           //在所有的中间件处理完成之后，最后总要通过dispatch()触发一个action
           //，最后所触发的这个action就是同步数据流
           dispatch(add(1))  
        }, 2000);
    }
}

//4.使用异步action
<button onClick={() => { store.dispatch(addAsync()) }}>点我异步加1</button>