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主 “技术胖”视频中学习到的,对自己学习工作有帮助所以进行了记录,如果涉及侵权,请联系我删除,前端小菜鸟,请大佬手下留情。

发布了30 篇原创文章 · 获赞 6 · 访问量 4741

猜你喜欢

转载自blog.csdn.net/EcbJS/article/details/104643335