Reactjs 在应用applyMiddleware（thunk）获取时；无法将类作为函数调用"，在react js中

这是我的index.js文件代码-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import { Provider } from 'react-redux';
import thunk from 'react-thunk';
import { createStore, applyMiddleware } from 'redux';
import Login from './Components/LoginRegister';

const store= createStore(
        (state = {}) => state, 
        applyMiddleware(thunk)
    );

ReactDOM.render(( 
    <Provider store={store}>
      <Router>
        <switch>
            <Route exact path="/" component={App} />
            <Route path="/Loginregister" component={Login} />
        </switch>
      </Router>
    </Provider>  ),
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
导入“./index.css”；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从'react redux'导入{Provider}；
从“react thunk”导入thunk；
从“redux”导入{createStore，applyMiddleware}；
从“/Components/LoginRegister”导入登录名；
const store=createStore(
（state={}=>state，
applyMiddleware（thunk）
);
ReactDOM.render（（
),
document.getElementById（'root'））
);

当我将“applyMiddleware”中的“thunk”作为“applyMiddleware（thunk）”传递时，我在控制台上得到以下错误-

Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (index.js:15)
    at ReactThunk (index.js:36)
    at applyMiddleware.js:51
    at createStore (createStore.js:65)
    at Object.<anonymous> (index.js:11)
    at __webpack_require__ (bootstrap b42575b…:555)
    at fn (bootstrap b42575b…:86)
    at Object.<anonymous> (bootstrap b42575b…:578)
    at __webpack_require__ (bootstrap b42575b…:555)
    at bootstrap b42575b…:578

UncaughtTypeError:无法将类作为函数调用
at_classCallCheck（index.js:15）
在ReactThunk（index.js:36）
在applyMiddleware.js:51
在createStore（createStore.js:65）
反对。（索引js:11）
at\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
在fn（引导b42575b…：86）
反对。（引导程序b42575b…：578）
at\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
在引导程序b42575b中…：578

---

请让我知道我做错了什么

从错误中可以明显看出你的问题。不能将函数作为类发送。在

createStore（）

中，您的第一个参数是一个函数。它应该是你的组合减速器

使用您拥有的还原器创建一个文件，然后将其导入索引文件。然后做一些类似的事情

const store = createStore(rootReducer, applyMiddleware(thunk))

你在进口吗

import thunk from 'react-thunk';

但是thunk来自redux thunk模块

所以你应该进口

import thunk from 'redux-thunk';

此外，我认为您的“createStore”呼叫会有问题

createStore采用一个减缩器（或组合减缩器）和可能的中间件

reducer接受一个状态和一个操作，并且必须返回存储的新状态

function reducer(state, action){

  // Switch-Case for action.type
  // Copy the current state and apply changes

  return state;
}

---

这就是我所做的，我希望它能帮助别人

在index.js中

import { Provider } from 'react-redux'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

import authReducer from './authReducer'
import projectReducer from './projectReducer'
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
  auth: authReducer,
  project: projectReducer,
})

export default rootReducer

const initState = {
  projects: [
    { id: '1', title: 'help me find peach', content: 'blah blah blah' },
    { id: '2', title: 'collect all the stars', content: 'blah blah blah' },
    { id: '3', title: 'egg hunt with yoshi', content: 'blah blah blah' },
  ],
}

const projectReducer = (state = initState, action) => {
  switch (action.type) {
    case 'CREATE_PROJECT':
      console.log('create project', action.project)
      return state
    default:
      return state
  }
}

export default projectReducer

在.store/reducers/projectReducer.js中

import { Provider } from 'react-redux'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

import authReducer from './authReducer'
import projectReducer from './projectReducer'
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
  auth: authReducer,
  project: projectReducer,
})

export default rootReducer

const initState = {
  projects: [
    { id: '1', title: 'help me find peach', content: 'blah blah blah' },
    { id: '2', title: 'collect all the stars', content: 'blah blah blah' },
    { id: '3', title: 'egg hunt with yoshi', content: 'blah blah blah' },
  ],
}

const projectReducer = (state = initState, action) => {
  switch (action.type) {
    case 'CREATE_PROJECT':
      console.log('create project', action.project)
      return state
    default:
      return state
  }
}

export default projectReducer

---

谢谢你的快速回复，那么，rootReducer.js文件中有什么内容呢？是“（state={}）=>state”还是别的什么？还有一件事，如果我写“applyMiddleware（）而不是applyMiddleware（thunk）”，那么它没有显示任何错误，你确定错误与我们的第一个参数有关吗？首先，正如@Bjoern提到的，从

redux thunk

导入

thunk

，这可能是主要问题。您可能安装了

react-thunk

而不是

redux-thunk

，这就是您没有模块错误的原因。关于rootReducer，reducer获取状态和操作，并根据发送给它的操作返回新状态。