function / Redux TypeError:无法将类作为函数调用

Question

我得到了这个错误(试图学习redux/react)，不确定错误来自何处.

我试着在这里和谷歌上找到答案，但我所做的一切都没有解决这个问题。

我还在学习，所以如果你能提供一个全面的解决方案，我们会非常感激的:)

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux'
import { store } from './redux/store'

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

*App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { toggle } from "./redux/action";
import './App.css';

class App extends Component {

  render() {
    return (
      <div>
         {this.props.toggle ? <h1>Hi</h1> : <h1>Bye</h1>}
        <button onClick={this.props.onToggle}>Click Me</button>
      </div>
    )
  }
}


const mapStateToProps = state => {
  return {
    toggle: state.isCorrect
  };
}

const mapsDispatchToProps = dispatch => {
  return {
    onToggle: (bool) => dispatch(toggle(bool))
  };
}

export default connect(mapStateToProps, mapsDispatchToProps)(App)

store.js

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'react-thunk'

const INITIAL_STATE = {
    isCorrect: false
}

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'IS_CORRECT':
      return {
          ...state,
        isCorrect: state.isCorrect = !state.isCorrect
      }
  }
  return state;
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
         reducer,
         composeEnhancers(applyMiddleware(thunk))
       );

action.js

export const toggle = (bool) => {
    return {
      type: "IS_CORRECT",
      state: bool
    };
}

误差

index.js:37 Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (index.js:37)
    at ReactThunk[Component] (index.js:80)
    at redux.js:644
    at <anonymous>:1:28399
    at createStore (redux.js:79)
    at Module../src/redux/store.js (store.js:21)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?e32c:37)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

错误在store.js文件中，您正在错误地导入thunk。

import thunk from 'redux-thunk'

它应该是“还击”，而不是像上面那样的反应。

Answer 2

class App extends Component {

  render() {
    return (
      <div>
         {this.props.toggle ? <h1>Hi</h1> : <h1>Bye</h1>}
        <button onClick={() => this.props.onToggle(!this.props.toggle)}>Click Me</button>
      </div>
    )
  }
}

不确定这是否解决了issue.Providing完全错误堆栈会有很大帮助。并提供./redux/actions.js文件。