title: How to fix 'Actions must be plain objects. Use custom middleware for async actions.'
body: <p>I am making a React-redux component to embed in Laravel blade file. Where in the react side, </p>
  
  <p>I am using redux with the thunk, When I try to get data without thunk from the Laravel route, it getting properly. </p>
  
  <p>But When I use an axios request in the action creator to get data asynchronously. It gives the: </p>
  
  <blockquote>
    <p>'Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.'</p>
  </blockquote>
  
  <p>This is the entry component of the react side.</p>
  
  <p><strong>Entry.js</strong></p>
  
  <pre><code>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__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  // console.log(getState());
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;
      , document.getElementById('like_post'));
  </code></pre>
  
  <p>This is the <strong>App.js</strong> main component</p>
  
  <pre><code>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 &gt; 999 ? (num / 1000).toFixed(1) + 'k' : num
      }
  
      componentDidMount() {
          this.props.getCurrentPostLikes();
          // axios.get(`/api/get_post_likes/${this.state.post_slug}`)
          // .then(response =&gt; {
          //     console.log(response.data.likes);
          //     this.setState({
          //         post_likes: response.data.likes
          //     })
          // })
      }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;a href="javascript:"&gt;&lt;img src="/images/love.svg" alt="post like" width="50px" height="50px"/&gt;&lt;/a&gt;
          &lt;p&gt;{this.kFormatter(this.state.post_likes)}&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;{this.props.likes}&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default connect(null, {getCurrentPostLikes})(App);
  // export default connect( mapStateToProps, mapDispachToProps )(App);
  </code></pre>
  
  <p>This is the <strong>actions.js</strong> file <em>/store/actions/actions.js</em></p>
  
  <pre><code>// 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 = () =&gt; dispatch =&gt; {
    return dispatch =&gt; {
      setTimeout(() =&gt; {
        axios.get(`/api/get_post_likes/2`)
            .then(res =&gt; {
                // console.log(response.data.likes);
                // console.log(getState());
              setTimeout(() =&gt; {
                  dispatch({
                      type: GET_POST_LIKES,
                      payload: res.data.likes
                  })
              }, 4000);
            })
            .catch(err =&gt; {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: {}
                })
            })
      }, 3000);
    }
  }
  </code></pre>
  
  <p>Tried this action creator also, but still same error</p>
  
  <pre><code>export const getCurrentPostLikes = () =&gt; {
    return dispatch =&gt; {
        axios.get(`/api/get_post_likes/2`)
            .then(res =&gt; {
                  dispatch({
                      type: GET_POST_LIKES,
                      payload: res.data.likes
                  })
            })
            .catch(err =&gt; {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: {}
                })
            })
    }
  }
  </code></pre>
  
  <p>This is the <strong>reducers.js</strong> file under <em>/store/reducers/reducer.js</em></p>
  
  <pre><code>import { GET_POST_LIKES } from '../actions/types';
  
  const initialState = {
      likes: null
  };
  
  const reducer = (state=initialState, action) =&gt; {
      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;
  </code></pre>
  
  <p>Now, This should return a field value of posts table, with <code>post id = 2</code>.</p>