当前位置: 首页 > Web前端 > HTML

ReduxDevTools:Redux调试工具使用介绍redux-devtools-extension

时间:2023-03-28 14:23:02 HTML

一个调试redux代码的工具。官方推荐的是redux-devtools-extension。安装完成后,我们需要在代码中进行配置,才能在浏览器中浏览调试代码。首先,我们安装redux调试工具,它安装在Chrome中。自己安装,打开Goog??leWebAppStore:搜索redux,安装第一个。二、代码中创建store时,判断window.devToolsExtension函数是否存在更多配置参考:官网链接指定extension的选项,使用方法如下:constcomposeEnhancers=typeofwindow==='object'&&窗口.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({//指定黑色操作,扩展列表等操作,序列化...}):compose;constenhancer=composeEnhancers(applyMiddleware(...middleware),//其他存储增强器(如果有的话);conststore=createStore(reducer,enhancer);引入compose并使用compose结合thunk结合window.devToolsExtension:store/index.jsimportreducersfrom'./reducers';从'redux-thunk'导入thunk;constcomposeEnhancers=typeofwindow==='object'&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__吗?window.__REDUX_DEV__TOOLS_COMPOSE(POS_EXT}):撰写;constenhancer=composeEnhancers(applyMiddleware(thunk),);conststore=createStore(reducers,enhancer);导出默认存储;配置完成后,我们可以在Chrome的调试窗口的redux选项卡中实时看到状态。更多配置和具体使用请参考官网PS:未来的你,一定要感谢今天努力的自己!