We built and used the redux environment in the React+Typescript project environment above . We created a redux project environment.
However, when we use the Google Chrome plug-in to debug, we
will find that there is a problem with the mismatched data and we cannot see the data, or we cannot connect
at all . When we click the plus and minus signs to change the value, the debugging tool does not respond.
We enter it in the terminal.
npm install --save-dev redux-devtools-extension @types/redux-devtools-extension
Introduce dependencies.
By chance, we introduce the composeWithDevTools function under redux-devtools-extension in index.tsx under store.
Then as the second parameter of 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;
Some versions are written like this.
Then we start the project again and open the debugging tool,
and we can see the data we actually set.
Then we click the plus and minus signs to operate the values
. Then our debugger will pop up the new changes.
