Возможность просмотра моего состояния с помощью инструментов разработчика браузера

Question

У меня есть файл TypeScript с именем dataStore.ts, а вот содержимое:

import { createStore, Store } from "redux";
import { StoreReducer} from "./reducer";
import { StoreData, StoreAction } from "./types";

export const dataStore: Store<StoreData, StoreAction> = createStore(StoreReducer);

Я хочу добавить нижеприведенный код, чтобы я мог просматривать свое состояние с помощью инструментов dev.

Я пытался добавить строку под моим createStore, но мне не повезло.

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Где мне добавить строку выше?

Answer 1

Используйте composeWithDevTools из redux-devtools-extension.

Поэтому измените свой 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__()