解决谷歌Redux DevTools调试React+Typescript项目数据对不上/连接不上问题

最新推荐文章于 2024-08-13 08:36:27 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2024-08-13 08:36:27 发布

阅读量260

点赞数

文章标签： react.js typescript ubuntu

本文链接：https://blog.csdn.net/weixin_45966674/article/details/133217106

版权

上文 React+Typescript项目环境中搭建并使用redux环境我们创建了一个redux项目的环境
但是我们用谷歌浏览器插件调试
会发现要不匹配的数据有问题看不到数据要不就压根连接不到
而且我们点击加减号去改变值调试工具也没有任何反应
在这里插入图片描述
我们终端输入

npm install --save-dev redux-devtools-extension @types/redux-devtools-extension

引入一下依赖
在这里插入图片描述
然偶我们在 store 下的 index.tsx 引入 redux-devtools-extension下的 composeWithDevTools 函数

然后当做enthusiasm 的第二个参数

import { createStore, Reducer } from 'redux';
import { enthusiasm } from '../reducer/index';
import { EnthusiasmAction } from '../actions/index';
import { IStoreState } from '../types/index';
import { composeWithDevTools } from "redux-devtools-extension"

const initialState: IStoreState = {
  enthusiasmLevel: 1,
  languageName: 'TypeScript'
};

const store = createStore<IStoreState, EnthusiasmAction, {}, {}>(enthusiasm as Reducer<IStoreState, EnthusiasmAction>, initialState,composeWithDevTools());

export default store;