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

接下来我们讲解一下Redux-thunk这个Redux最常用的插件。什么情况下会用到这个插件呢?比如在Dispatch一个Action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware(中间件)。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告,调用异步接口或者路由。 这个中间件可以使用是Redux-thunk来进行增强(当然你也可以使用其它的),它就是对Redux中dispatch的加强,本文我们先来学习一下安装和配置。

Redux进阶-Redux-thunk中间件的安装和配置

安装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插件了。

 

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P15:Redux进阶-Redux-thunk中间件的安装和配置

发表评论

提供最优质的资源集合

立即查看 了解详情