CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-thunk
R. Kohlisch
R. Kohlisch

Reputation: 2993

Redux-Thunk : Actions must be plain objects

Redux thunk is not working for me, not sure why not. Before, everything worked. Now I'm trying to get redux-thunk to work, but it's just giving me

Actions must be plain objects

My Code is fairly standard, I think:

createStore

import { createStore as reduxCreateStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';

import reduxThunk from 'redux-thunk';

const createStore = () =>
  reduxCreateStore(reducers, {}, applyMiddleware(reduxThunk));
export default createStore;

Put store into Provider

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}

Call Action from React Component

import React, { Component } from "react";
import m from "mousetrap";
import { connect } from "react-redux";
import * as actions from "./src/actions";

class Mousetrap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { //binding the action to mousetrap hotkeys here
    m.bind(["space"], () => this.props.nextDiv());
  }
  //...
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
  };
}

export default connect(mapStateToProps, actions)(Mousetrap);

Action Creator:

export const nextDiv = () => {
   return (dispatch, getState) => {
     dispatch({ type: NEXT_DIV });
  };
};

From what I've found online so far, it looks like most people get this error when there is something wrong in their action creator, i.e. when they don't return the function etc. - but I am doing this correctly, I believe?

I think maybe something goes wrong in this step:

import * as actions from "./src/actions";
//...
export default connect(mapStateToProps, actions)(Mousetrap);

Maybe I cannot import thunk action creators like this? Or maybe my binding the action is somehow not working with redux-thunk now? Sorry for asking this, I feel it's probably something trivial! Thanks a lot in advance!

Upvotes: 1

Views: 103

Answers (1)

Grabofus
Grabofus

Reputation: 2034

You're not using your createStore method, rather importing it from redux again. So the middleware is not added.

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux"; <--
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}

Upvotes: 2

Related Questions