使用 Redux Dev Tools 扩展和 Typescript答案

【问题标题】：Working with Redux Dev Tools extension and Typescript使用 Redux Dev Tools 扩展和 Typescript
【发布时间】：2020-12-04 10:38:27
【问题描述】：

我正在将我的项目转换为 Typescript。

这在 JS 中一直对我有用。

/* ##################### */
/* #### REDUX STORE #### */
/* ##################### */

const store = createStore(rootReducer, {
  // INITIAL STATE GOES HERE
},window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

但是在 Typescript 中我遇到了这些错误：

我该如何解决这个问题？

【问题讨论】：

标签： typescript redux redux-devtools redux-devtools-extension

【解决方案1】：

我发现的最简单的解决方案是将__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 显式添加到窗口对象

declare global {
  interface Window {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
  }
}

【讨论】：

【解决方案2】：

TS 编译器抛出错误，因为它不知道 Window 对象的 REDUX_DEVTOOLS_EXTENSION 属性。您可以扩展 Window 界面并添加使 TS 编译器满意的界面。或者你可以这样做：

createStore(rootReducer,{//INITIAL STATE GOES HERE},composeWithDevTools());

引用：https://redux.js.org/recipes/configuring-your-store#integrating-the-devtools-extension

【讨论】：

谢谢！我可以把它留在生产中吗？还是我应该麻烦删除它？
这可能取决于您是否有面向消费者的应用程序，是否在状态中存储秘密等？我个人认为这没什么大不了的，但 YMMV。这是我从谷歌快速搜索中找到的：medium.com/@zalmoxis/…，如果你愿意，这里是如何排除它们 - github.com/reduxjs/redux-devtools/blob/master/docs/…
更好的是，您应该使用our official Redux Toolkit package，它有一个configureStore 功能，可以自动为您启用Redux DevTools Extension。