redux配置中间件后,react调试工具不能用

redux配置中间件后,redux调试工具DEVTools不能用,这可咋整

我的第一篇技术博客,请各位大佬多多指点,问题如上,我使用的是redux-think中间件,主要用来存放一些ajax请求,配置过程仿照官网,使用webpack来配置
打开控制台输入,首先进入我们创建的项目中

npm install --save redux-thunk

安装完成后,打开store下的index.js

import { createStore , applyMiddleware } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
const store = createStore(
	reducer,
	applyMiddleware(thunk)
)
export default store

正常来说到这一步,中间件就已经配置好了,也是完全可以使用了,但是如果之前安装过DEVTools的话,store里面多一个

const store = createStore(
	reducer,
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

由于createStore只能接受两个参数,写了applyMiddleware就不能写DEVTOOLS,这就很尴尬了,二选一,怎么办?
有句话叫没本事才做选择题,有钱人全都要
这时候需要我们创建一个增强函数,就是在执行完applyMiddleware的时候再执行DEVTOOLS,骗createStore,让他以为只有reducer和增强函数两个参数,其实函数里面包含了两个。

import { createStore , applyMiddleware, compose } from 'redux'
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(thunl))
const store = createStore(
	reducer,
	enhancer
)
export default store

本文知识点是从B站UP主 “技术胖”视频中学习到的,对自己学习工作有帮助所以进行了记录,如果涉及侵权,请联系我删除,前端小菜鸟,请大佬手下留情。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值