redux中间件-redux-thunk

今天，让我们一起揭开redux中间件-redux-thunk的神秘面纱。

本次小文章将会以任务驱动的形式去逐步讲解thunk及其在redux中的使用，这样易于理解，有理有据能够化抽象为具体。

• 首先，为什么要使用redux中间件？什么是中间件？中间件有什么作用呢？

redux是一个通用的JavaScript状态管理容器。对于state的变化是通过触发dispatch一个action，然后最交给reducer计算出新的state来实现的。

但是，dispatch函数本身只能传入一个普通的action对象作为参数。一方面，而在实际运用中，读取数据需要调用异步逻辑，比如jQuery的ajax库或者axios，回调函数内部返回的是一个请求对象，这样就无法获取到一个简单的有实际意义的action对象。另一方面，reducer必须是纯函数，不能包含任何的异步逻辑或者是非纯函数的调用。

这样，异步逻辑要何去何从？

脑瓜子机灵的你一定想到了，把异步逻辑放在组件的生命周期钩子函数里，这样获取到了数据就可以求得一个普通的action对象，再调用dispatch函数触发reducer即可。但是这样造成了组件生命周期臃肿，难以维护的问题。

所以，redux-thunk就增强了dispatch函数，使得dispatch可以传入一个包含异步逻辑的函数作为参数，就解决了dispatch只能传入普通action的问题。

中间件(Middleware)就是运行在redux与框架之间的一层工具或者是插件，可以对redux发生作用，增强dispatch函数。

• 其次，在redux中如何使用redux-thunk？

在安装node和redux的前提下，在项目下执行cmd：

npm i redux-thunk

将redux-thunk导入，安装在redux上

import { createStore, applyMiddleware } from "redux"
/*thunk实现了函数的柯里化*/
import thunk from "redux-thunk"
/*导入reducer,作为createStore的参数*/
import reducer from './reducer'
const store = createStore(reducer, applyMiddleware(thunk))

export default store

• 然后，thunk是什么？有什么特点？

thunk其实就是调用dispatch函数时传入的一个函数类型的参数。thunk就是一个包含异步逻辑函数，默认的参数是dispatch。

例如：

unction get_motto() {
    // const result = axios.post('https://eolink.o.apispace.com/xhdq/common/joke/getJokesByRandom')
    // console.log(result)
    /**
     * 异步函数返回的都是一个Promise对象
     * 我们只是将请求来的数据组合成普通的action,最后dispatch即可
     * 此时返回的函数就是thunk,默认的参数是dispatch函数
     */
    return async(dispatch) => {
        const result = await axios.get('https://v.api.aa1.cn/api/api-wenan-dujitang/index.php?aa1=json')
        console.log('action', { 'type': 'get_motto', 'value': result.data })
        dispatch({ 'type': 'get_motto', 'value': result.data })
    }
}

export {
    get_motto
}

在组件中触发dispatch：

• 最后，在redux中使用redux-thunk有什么要注意的地方？

不能将thunk外部的函数定义为异步函数，因为thunk是要作为返回值的。如果外部函数是异步函数，则返回的是一个Promise对象，thunk不能起作用。

今日格言：JavaScript其实不简单，因为它灵活多变，是生的灵，心存误解才会贬低它，要做一个谦虚正直的IT科研人员！