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

Question

我得到未处理的拒绝（错误）：操作必须是普通对象。 使用自定义中间件进行异步操作。 我想调用“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')
);

这是我的root reducer代码：

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;

谁能帮助我为什么我得到那个未处理的错误？

谢谢。

Answer 1

一篇可以提供帮助的好文章是减少4种方式 。

关于代码。

使用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())
    }

Answer 2

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

我也是新的反应，所以我不是百分百肯定，但尝试这个配置（当然安装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')
);