【React】react在代码中整合redux dev tolols时的问题

Z时代
2024-01-10
分类：技术分享

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore,applyMiddleware,compose} from "redux"
import thunk from "redux-thunk"//处理异步
import App from './App';
//import{counter} from './redux'
import * as rdx from "./redux"
import registerServiceWorker from './registerServiceWorker';
const reduxDevTool=window.devToolsExtension?window.devToolsExtension():f=>f;
const store=createStore(
rdx.counter,
compose(
applyMiddleware(thunk),
reduxDevTool
)
);
我想要用redux 的工具来监测变化，教程上推荐用这种方式，
已经安装了redux dev tool chrome插件
但是并不奏效。
下面是报错内容

回答

不是仅仅安装redux chrome插件就可以了，还需要redux-devtools-extension

install

npm install --save-dev redux-devtools-extension

下面参考我的配置：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from "./reducers";
import { Provider } from 'react-redux';
const error = store => next => action => {
  try {
    next(action)
  } catch (e) {
    console.log('error', e)
  }
}
const store = createStore(reducer, {}, composeWithDevTools(applyMiddleware(logger, error ,thunk, promise())));
ReactDOM.render(
  <Provider store={store}>
    <App store={store} />
  </Provider>, document.getElementById('root'));registerServiceWorker();