React / Redux TypeError: Невозможно вызвать класс как функцию

Question

я получаю эту ошибку (пытаюсь научиться редуцировать / реагировать), не знаю, откуда возникла ошибка ...

Я пытался найти ответ здесь и в Google, но все, что я пытался, не исправилопроблема.

Я все еще учусь, поэтому, если вы сможете предоставить комплексное решение, оно будет высоко оценено:)

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'

Это должен быть "redux-thunk", а не реагирующий-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>
    )
  }
}

Не уверен, что это решит проблему. Предоставление полного стека ошибок было бы очень полезно. а также предоставить файл ./redux/actions.js