CODEWITHSUNDEEP
reactjsfunctionclassreduxtypeerror
David Zagorsky
David Zagorsky

Reputation: 73

React / Redux TypeError: Cannot call a class as a function

im getting this error (trying to learn redux/react) , not sure where the error comes from...

I did try finding the answer here and on google but everything i tried did not fix the issue.

Im still learning so if you can provide a comprehensive solution it will be greatly appreciated :)

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
    };
}

error

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

Upvotes: 0

Views: 1196

Answers (2)

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

The mistake is in store.js file, You are incorrectly importing the thunk.

import thunk from 'redux-thunk'

It should be "redux-thunk" not react-thunk like above.

Upvotes: 2

Phani
Phani

Reputation: 88

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>
    )
  }
}

Not sure this solves the issue.Providing full error stack would have much helpful. and also provide ./redux/actions.js file

Upvotes: 0

Related Questions