能够使用浏览器开发工具查看我的状态

Question

下面有一个名为dataStore.ts的TypeScript文件，内容如下：

import { createStore, Store } from "redux";
import { StoreReducer} from "./reducer";
import { StoreData, StoreAction } from "./types";
export const dataStore: Store<StoreData, StoreAction> = createStore(StoreReducer);

我希望能够添加下面的代码，这样我就可以通过开发工具查看我的状态。

我试着在createStore下面加了一行，但没有成功。

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

我在哪里添加上面的行？

Answer 1

使用redux-devtools-extension中的composeWithDevTools。

所以把你的dataStore.ts改成这样：

import { createStore, Store } from "redux";
import { composeWithDevTools } from "redux-devtools-extension:;
import { StoreReducer} from "./reducer";
import { StoreData, StoreAction } from "./types";
export const dataStore: Store<StoreData, StoreAction> = createStore(StoreReducer, composeWithDevTools())

不要忘记yarn add redux-devtools-extension或npm install redux-devtools-extension。

这样做之后，这条线就不再需要了：

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()