在应用 applyMiddleware(thunk) 得到“不能将类作为函数调用”时，在反应 js 中

Posted 2023-02-22

【中文标题】在应用 applyMiddleware(thunk) 得到“不能将类作为函数调用”时，在反应 js 中

【英文标题】：while applying applyMiddleware(thunk) getting "Cannot call a class as a function" , in react js

【发布时间】：2017-10-21 17:59:27

【问题描述】：

这是我的 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')
);

当我在“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

请让我知道我做错了什么。

【参考方案1】：

您正在导入

import thunk from 'react-thunk';

但是 thunk 来自 redux-thunk 模块。

所以你应该导入

import thunk from 'redux-thunk';

此外，我认为您对“createStore”的调用会有问题。

createStore 采用 reducer（或组合的 reducer）和可能的中间件。

reducer 接受一个状态和一个动作，并且必须返回 store 的新状态。

function reducer(state, action)

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

  return state;

【参考方案2】：

嗯，你的问题从错误中就很明显了。您不能将函数作为类发送。在createStore() 你的第一个参数是一个函数。它应该是您拥有的组合减速器。

使用你拥有的 reducer 创建一个文件，将其导入索引文件。然后做类似的事情

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

【讨论】：

感谢您的快速回复，那么，rootReducer.js 文件中有什么？是 "(state = ) => state" 还是别的什么？

还有一件事，如果我写“applyMiddleware() 而不是 applyMiddleware(thunk)” 那么它没有显示任何错误，你确定错误与我们的第一个参数有关吗？

首先，正如@Bjoern 提到的，从redux-thunk 导入thunk，也许这是主要问题。您可能安装了react-thunk 而不是redux-thunk，这就是您没有遇到模块错误的原因。关于 rootReducer，reducers 接受 state 和 action，并根据发送给它的 action 返回新的 state。

【参考方案3】：

这是我做的，我希望它可以帮助别人

在 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')
)

在 .store/reducers/rootReducer.js

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

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

export default rootReducer

在 .store/reducers/projectReducer.js

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