Redux-Thunk : Actions must be plain objects

Question

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!

As a first observation, your nextDiv function does not need to be a thunk as currently written. It could simply be const nextDiv = () => ({type: "NEXT_DIV"}). Second, I would suggest sticking a breakpoint in the code of the Redux createStore function in your browser's DevTools, and see what actual value is reaching dispatch. Third, I'd strongly recommend using our official Redux Toolkit package to set up the store instead of doing it by hand. — markerikson
Thanks a lot, Mark. I've been reading lots of your posts, really appreciate your work! I'm aware I don't need a thunk here, I just wanted to figure out where the problem lies so I simplified matters a bit. I'll check out the redux toolkot package, thank you! — R. Kohlisch

Grabofus Grabofus · Accepted Answer · 2020-02-28T21:09:52

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

Redux-Thunk : Actions must be plain objects

1 Answers