P15:Redux-thunk中间件的安装和配置

￡神魔★判官ぃ 2023-10-06 20:56 26阅读 0赞

#### Redux 进阶 ####

*  阐述
 *  安装 Redux-thunk 组件
 *  配置 Redux-thunk 组件

## 阐述 ##

接下来我们讲解一下 `Redux-thunk` 这个Redux最常用的插件。  
什么情况下会用到这个插件呢？

比如在 `Dispatch` 一个 `Action` 之后，到达 `reducer`之前，进行一些额外的操作，就需要用到 `middleware`（中间件）。

在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。 这个中间件可以使用的是Redux-thunk来进行增强(当然你也可以使用其它的)，它就是对Redux中dispatch的加强，本文我们先来学习一下安装和配置。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 安装 Redux-thunk 组件 ##

Redux-thunk并不在Redux基础组件中，也就是说需要进行新的安装。  
安装使用npm就可以了，安装指令如下：

npm install --save redux-thunk

## 配置 Redux-thunk 组件 ##

安装作起来很容易，但是配置就要稍微注意一下了，这里边还是有几个小坑的，如果你完全按照官方文档是配置不成功的。

需要在创建store的地方引入redux-thunk，对于我们的目录来说，就是 `/store/index.js`文件。

1、引入`applyMiddleware`，如果你要使用中间件，就必须在redux中引入applyMiddleware。

import {
         createStore , applyMiddleware } from 'redux'

2、引入 redux-thunk 库

import thunk from 'redux-thunk'

如果你按照官方文档来写，你直接把 thunk 放到 createStore 里的第二个参数就可以了，但以前我们配置了Redux Dev Tools，已经占用了第二个参数。

官方文档给的方法:

const store = createStore(
        reducer,
        applyMiddleware(thunk)
    ) // 创建数据存储仓库

这样写是完全没有问题的，但是我们的Redux Dev Tools插件就不能使用了，如果想两个同时使用，需要使用增强函数。

使用增加函数前需要先引入`compose`。

import {
         createStore , applyMiddleware ,compose } from 'redux'

然后利用 compose 创造一个增强函数，就相当于建立了一个链式函数，  
代码如下:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        }) :
        compose

有了增强函数后，就可以把 thunk 加入进来了，这样两个函数就都会执行了。

const enhancer = composeEnhancers(applyMiddleware(thunk))

这时候直接在createStore函数中的第二个参数，使用这个 `enhancer` 变量就可以了，相当于两个函数都执行了。

const store = createStore( reducer, enhancer) // 创建数据存储仓库

这里可能有的童鞋对增加函数还不能完全理解，其实你完全把这个想成固定代码，直接使用就好，我在这里给出全部代码，方便你以后学习使用。

import {
         createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法
    import reducer from './reducer'    
    import thunk from 'redux-thunk'
    
    const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        }):compose
    
    const enhancer = composeEnhancers(applyMiddleware(thunk))
    
    const store = createStore( reducer, enhancer) // 创建数据存储仓库
    export default store   //暴露出去

这样就算把Redux的中间件配置好了，可以运行项目，到浏览器看一下结果和看一下Redux Dev Tools插件了。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/36d3fb33b36d475ea9f64bfb2086844b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/558f3139c1814552934633c80cd7fd8f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16