简单介绍一下thunk，这是一个中间件，是解决redux异步问题产生的。我们都知道，在使用redux的时候，通过dispatch一个action 发生到reducer 然后传递给store修改状态一系列都是同步的，那如果说我dispatch一个action 这个action帮我请求一下接口数据，你发现接口请求是异步的，没有办法等接口数据返回再传递给reducer 这个时候中间件就产生啦。 redux比较常用的中间件有 redux-saga、redux-thunk、redux-promise等都是为了解决dispatch action异步处理问题

redux中间件对redux应用实现异步

使用 thunk 等中间件可以帮助在 Redux 应用中实现异步性。可以将 thunk 看做 store 的 dispatch() 方法的封装器；我们可以使用 thunk action creator 派遣函数或 Promise，而不是返回 action 对象。例如：正常请求接口完再使用dispatch去修改状态。但是如果想在dispath -> action里面执行异步操作就需要thunk 注意，没有 thunk 的话，默认地是同步派遣。

redux-thunk 使用实例:

首先安装：yarn add redux-thunk

store.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import {add, deleter} from './Reducers/TodoList';

// combineReducers 合并多个reducer

// applyMiddleware是redux提供了应用中间件的函数 只要应用了中间件 dispatch的流程就可以经过中间件了

// 例如以前是:  dispatch -> action -> reducer -> store
// 现在是:     dispatch -> action -> middleware -> reducer -> store

export default createStore(
    combineReducers({add, deleter}),
    applyMiddleware(thunk) // 应用thunk中间件
);

// 在对dispatch函数进行映射时 action creator 可以直接返回一个函数 不用直接返回action 这使得里面可以写异步操作 先去请求接口 在去dispatch一个action到reducer

// 当应用了thunk中间件时 action creator返回的函数都会默认传递一个dispatch的方法 然后再去dispatch action
const mapDispatchToProps = {    
    dispatchListAction: (res) => {
        return {
            type: FETCH_LIST,
            payload: res
        };
    };
    
    getList: () => {
        return (dispatch) => {
            fetch('http://jsonplaceholder.typicode.com/posts').then((res) => {
                return res.json()
            }).then(res => {
                dispatch(mapDispatchToProps.dispatchListAction(res));
            })
        }
    }
};

redux-thunk源码

源码仅仅只有10多行，虽然这有几行代码，但仍不失为是一个好的组件，简单就可以解决异步问题有兴趣的可以去阅读一下源码这里就不做源码剖析了

源码阅读的话应该先从applyMiddleware这个函数开始入手然后方知thunk之精髓

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。

Redux异步解决方案 1. Redux-Thunk中间件

redux-thunk 使用实例:

redux-thunk源码