0

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
3
  • which error? can't see it in your question Commented Oct 15, 2019 at 10:16
  • please add action.js file code also Commented Oct 15, 2019 at 10:19
  • ive added the action.js Commented Oct 15, 2019 at 10:40

2 Answers 2

2

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.

Sign up to request clarification or add additional context in comments.

Comments

0
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

1 Comment

it didnt fixed the issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.