[FIXED] How to fix 'Actions must be plain objects. Use custom middleware for async actions.'

Issue

I am making a React-redux component to embed in Laravel blade file. Where in the react side,

I am using redux with the thunk, When I try to get data without thunk from the Laravel route, it getting properly.

But When I use an axios request in the action creator to get data asynchronously. It gives the:

'Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.'

This is the entry component of the react side.

Entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import reducer from '../store/reducers/reducer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import thunk from "redux-thunk";


const store = createStore(reducer, applyMiddleware(thunk)
+window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// console.log(getState());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('like_post'));

This is the App.js main component

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import axios from 'axios';
import {getCurrentPostLikes} from '../store/actions/actions';

class App extends Component {
    constructor(props) {
        super(props)

        var domain = window.location.hostname;
        var url = window.location.pathname;
        var urlsplit = url.split("/");
        var post_slug = urlsplit[urlsplit.length - 1];

        this.state={
            post_slug: post_slug,
            post_likes:''
        }
    }

    kFormatter(num) {
        return num > 999 ? (num / 1000).toFixed(1) + 'k' : num
    }

    componentDidMount() {
        this.props.getCurrentPostLikes();
        // axios.get(`/api/get_post_likes/${this.state.post_slug}`)
        // .then(response => {
        //     console.log(response.data.likes);
        //     this.setState({
        //         post_likes: response.data.likes
        //     })
        // })
    }

  render() {
    return (
      <div className="App">
        <a href="javascript:"><img src="/images/love.svg" alt="post like" width="50px" height="50px"/></a>
        <p>{this.kFormatter(this.state.post_likes)}</p>
        <p><span>{this.props.likes}</span></p>
      </div>
    );
  }
}


export default connect(null, {getCurrentPostLikes})(App);
// export default connect( mapStateToProps, mapDispachToProps )(App);

This is the actions.js file /store/actions/actions.js

// types.js is also defined properly as
// export const GET_POST_LIKES = 'GET_POST_LIKES';

import axios from 'axios';
import {GET_POST_LIKES} from './types';

// Get current post likes
export const getCurrentPostLikes = () => dispatch => {
  return dispatch => {
    setTimeout(() => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
              // console.log(response.data.likes);
              // console.log(getState());
            setTimeout(() => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
            }, 4000);
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
    }, 3000);
  }
}

Tried this action creator also, but still same error

export const getCurrentPostLikes = () => {
  return dispatch => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
  }
}

This is the reducers.js file under /store/reducers/reducer.js

import { GET_POST_LIKES } from '../actions/types';

const initialState = {
    likes: null
};

const reducer = (state=initialState, action) => {
    const newState = {...state};

    switch(action.type){
        case 'GET_POST_LIKES':
            return {
                ...state,
                post: action.payload
            }

        case 'LIKE_UP':
            newState.likes += action.value
            break;
    }
    return newState;
};

export default reducer;

Now, This should return a field value of posts table, with post id = 2.

Solution

Your problem is at Entry.js, this line:

const store = createStore(reducer, applyMiddleware(thunk) +window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

You are setting the thunk middleware as the second parameter. The second parameter is for the initial state. The thunk middleware should be part of the composed enhancers in the third parameter of the createStore function.

The parameters should be applied as such:

createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

Full example:

import { createStore, applyMiddleware, compose } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import createHistory from 'history/createHashHistory'
import rootReducer from './core/reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)


export default createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

Answered By - Adnan
Answer Checked By - - Candace Johnson (ReactFix Volunteer)