未捕获的类型错误：无法读取未定义反应 redux 的属性“应用”

Question

我知道那里有一些答案，但没有一个对我有用，例如安装 redux devtools 扩展。我已经有了。我正在使用带有 django 后端的 react 和 redux。这是 package.json 依赖项

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }

这里是 store.js。错误

import { createStore, applyMiddleware } from 'react';
import thunk from 'redux-thunk';
import { rootReducer } from './redux-file.js';
import { composeWithDevTools } from 'redux-devtools-extension';
const initialState = {};
const middleware = [thunk];
const applied = composeWithDevTools ( applyMiddleware(...middleware) ); //error!
const store = createStore(rootReducer, initialState, applied);


export default store;

这是 app.js

import React from 'react';
import Board from './Board';
import Home from "./Home";
import { Provider } from 'react-redux';
import store from './store';
import {BrowserRouter, Route} from 'react-router-dom';
class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div className="App" >
            <div className = "header"></div>
            <div className="navbar"></div>
            <div className="body">
              <Route path="/" component={Home} />
              <Route path="/game/play/:gameId/" component={Board} />
            </div>
          </div>
        </BrowserRouter>
      </Provider>
    )
  }
}

export default App;

Answer 1

您错误地从react 导入createStore 和applyMiddleware 而不是redux。它们都是redux 模块的一部分。尝试对store.js 进行以下更改：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { rootReducer } from './redux-file.js';
import { composeWithDevTools } from 'redux-devtools-extension';
const initialState = {};
const middleware = [thunk];
const applied = composeWithDevTools ( applyMiddleware(...middleware) ); //error!
const store = createStore(rootReducer, initialState, applied);


export default store;

希望对您有所帮助！