未捕獲的類型錯誤：無法讀取未定義的 react redux 的屬性“apply”

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而不是redux導入了createStore和applyMiddleware 。 它們都是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;

希望這有幫助！