React-Redux: Actions must be plain objects. Use custom middleware for async actions Error

Question

I am getting Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions. I want to call the "news api" endpoint to fetch the news and render them on the page.

Here is my code for action:

import * as types from './newsApiTypes';

const API_KEY = "6c78608600354f199f3f13ddb0d1e71a";

export const getNewsAPI = () => {
  return (dispatch, getState) => {
    dispatch({
      type: 'API_REQUEST',
      options: {
        method: 'GET',
        endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,
        actionTypes: {
          success: types.GET_NEWS_API_SUCCESS,
          error: types.GET_NEWS_API_ERROR
        }
      }
    });
  }
}

Here is my code for reducer:

import * as types from '../actions/newsApiTypes';

const initialState = {
  newNews: []
};

const getNewsAPIReducer = (state = initialState, action) => {
  switch(action.type) {
    case types.GET_NEWS_API_SUCCESS:
      return { ...state, newNews: action.data };

    case types.GET_NEWS_API_ERROR:
      return { ...state, error: action.data };

    default: {
      return state;
    };
  };
};

export default getNewsAPIReducer;

Here is my code for action types:

export const GET_NEWS_API = 'GET_NEWS_API';
export const GET_NEWS_API_SUCCESS = 'GET_NEWS_API_SUCCESS';
export const GET_NEWS_API_ERROR = 'GET_NEWS_API_ERROR';

Here is my Index.js with creating store with applyMiddleware:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector('.container')
);

Here is my code for root reducers:

import { combineReducers } from 'redux';
import NewsReducer from './reducer_news';
import KickstarterReducer from './reducer_kickstarter';
import NewsApiReducer from './newsApiReducer.js';

const rootReducer = combineReducers({
  news: NewsReducer,
  kickstarters: KickstarterReducer,
  newNews: NewsApiReducer
});

export default rootReducer;

Could anyone please help me why I am getting that unhandled error?

Thank you.

are you using any middleware? if no then check this ans why do we need middleware for async flow — Mayank Shukla
– Mayank Shukla, Commented Apr 5, 2018 at 4:22
@MayankShukla Yes I am using it. Please take a look at the updated post. — Eunicorn
– Eunicorn, Commented Apr 5, 2018 at 4:37
your action looks like it is using redux-thunk but your config says otherwise.. — tanmay
– tanmay, Commented Apr 5, 2018 at 4:48

Yossi · Accepted Answer · 2018-04-05 04:57:47Z

1

A great article that can help is redux 4 ways.

Regarding the code.

With redux-promise (which I see that you are using now) you should write:

export const getNewsAPI = () => {
  return {
      type: 'API_REQUEST',
      options: {
        method: 'GET',
        endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,
        actionTypes: {
          success: types.GET_NEWS_API_SUCCESS,
          error: types.GET_NEWS_API_ERROR
        }
      }

Or, with redux-thunk:

Instead of:

export const getNewsAPI = () => {
  return (dispatch, getState) => {
    dispatch({
      type: 'API_REQUEST',
      options: {
        method: 'GET',
        endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,
        actionTypes: {
          success: types.GET_NEWS_API_SUCCESS,
          error: types.GET_NEWS_API_ERROR
        }
      }
    });
  }
}

Use:

function actionCreator() {
  return {
          type: 'API_REQUEST',
          options: {
            method: 'GET',
            endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,
            actionTypes: {
              success: types.GET_NEWS_API_SUCCESS,
              error: types.GET_NEWS_API_ERROR
            }
          }  
      }
}

and:

export const getNewsAPI = () => {
  return function (dispatch) {
    dispatch(actionCreator())
    }

edited Apr 5, 2018 at 4:57

answered Apr 5, 2018 at 4:27

Yossi

6,0877 gold badges50 silver badges83 bronze badges

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

2 Comments

Eunicorn Over a year ago

Thank you for your answer. However, even with your answer, I still get the same error.

Yossi Over a year ago

And you use redux-thunk? I see redux-promise in your code . I added code for redux-promise to my answer.

tanmay · Accepted Answer · 2018-04-05 04:51:46Z

Your action looks like it is using redux-thunk but your config says otherwise.

I'm new to react as well so I'm not 100% sure, but try this configuration (after installing redux-thunk of course):

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(thunk, ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector('.container')
);

Collectives™ on Stack Overflow

React-Redux: Actions must be plain objects. Use custom middleware for async actions Error

2 Answers 2

With redux-promise (which I see that you are using now) you should write:

Or, with redux-thunk:

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

With redux-promise (which I see that you are using now) you should write:

Or, with redux-thunk:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related