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

3
votes

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.

2
javascriptreactjsreduxreact-reduxredux-thunk
Can you post your redux config file / module ? – Pritish Vaidya
are you using any middleware? if no then check this ans why do we need middleware for async flow – Mayank Shukla
@PritishVaidya I updated my post. Please take a look. – Eunicorn
@MayankShukla Yes I am using it. Please take a look at the updated post. – Eunicorn
your action looks like it is using redux-thunk but your config says otherwise.. – tanmay

2 Answers

1
votes

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())
    }
0
votes

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