Redux-Dev-Tools无法检测React应用数据变化，配置一下

Redux-Dev-Tools无法检测React应用数据变化，配置一下

如图所示↓

Redux-Dev-Tools并没有检测到数据

我们需要做一些配置，即在创建仓库时候在reducer后面加一下配置

js代码

// redux创建仓库
import { legacy_createStore } from "redux";
import reducer from "./reducer";

let store = legacy_createStore(reducer, /* preloadedState, */
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

ts代码

// redux创建仓库
import { legacy_createStore } from "redux";
import reducer from "./reducer";

let store = legacy_createStore(reducer, /* preloadedState, */
    (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

(window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()

然后就可以检测到store数据了

如果需要引入中间件，比如redux-thunk，则可以写成如下形式

// redux创建仓库
import { applyMiddleware, combineReducers, compose, legacy_createStore } from "redux";
import thunk from "redux-thunk";
import arrStatusReducer from "./arrStatus/reducer";
import numberStatusReducer from "./numberStatus/reducer";

const reducers = combineReducers({
    numberStatusReducer,
    arrStatusReducer
})

// 使用插件redux-dev-tools监测数据变化配置
const composeEnhancers =
  typeof window === 'object' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsDenylist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
  // other store enhancers if any
);

let store = legacy_createStore(reducers, 
    enhancer
);
export default store;