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

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

上文 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;