React-Redux：动作必须是普通对象。使用自定义中间件进行异步操作错误答案

【问题标题】：React-Redux: Actions must be plain objects. Use custom middleware for async actions ErrorReact-Redux：动作必须是普通对象。使用自定义中间件进行异步操作错误
【发布时间】：2018-09-14 18:52:45
【问题描述】：

我收到未处理的拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作。我想调用“news api”端点来获取新闻并将它们呈现在页面上。

这是我的操作代码：

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

这是我的 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;

这是我的动作类型代码：

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

这是我使用 applyMiddleware 创建商店的 Index.js：

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

这是我的根减速器代码：

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;

谁能帮我解释一下为什么我会收到那个未处理的错误？

谢谢。

【问题讨论】：

你能发布你的redux config文件/模块吗？
你在使用任何中间件吗？如果不是，请检查此答案why do we need middleware for async flow
@PritishVaidya 我更新了我的帖子。请看一看。
@MayankShukla 是的，我正在使用它。请查看更新后的帖子。
您的操作看起来像是在使用redux-thunk，但您的配置却另有说明..

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

一篇可以提供帮助的好文章是redux 4 ways。

关于代码。

使用 redux-promise（我看到你现在正在使用）你应该这样写：

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

或者，使用 redux-thunk：

代替：

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

用途：

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

和：

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

【讨论】：

感谢您的回答。然而，即使你的回答，我仍然得到同样的错误。
你使用 redux-thunk 吗？我在您的代码中看到了 redux-promise 。我在答案中添加了 redux-promise 的代码。

【解决方案2】：

您的操作看起来像是在使用redux-thunk，但您的配置另有说明。

我也是新手，所以我不能 100% 确定，但试试这个配置（当然是在安装 redux-thunk 之后）：

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

【讨论】：