REACT-REDUX：未捕獲錯誤：操作必須是普通對象

Question

下面是使用 React-Redux 獲取電影的代碼。 我使用 fetch() 從 API 獲取數據，但我收到錯誤消息“未捕獲的錯誤：操作必須是普通對象。使用自定義中間件進行異步操作。”

HomeAction.js

import {API_URL,  API_KEY} from '../config'; 

export function getMovies(movies)
{
    return function(dispatch){
    const url =`${API_URL}movie/popular?api_key=${API_KEY}&language=en-us&page=1`; 
    fetch(url)
      .then(response => response.json())  
      .then(function(data){
        dispatch({type:"GET_MOVIES", payload:data.results})
      })
      .catch(function(err){
        dispatch({type:"GET_MOVIES", payload:err})
      })
    }  
}

HomeReducer.js

export function HomeReducer(state ={
            },action)
{
    console.log(action);
    switch(action.type)
    {
        case "GET_MOVIES" : 
           return {...state,...action.payload};
           break;
       default : 
       break;
    }
    return state;
}

應用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
//redux 
import {createStore, applyMiddleware} from 'redux';
import {createLogger} from "redux-logger";
//to connect to react and redux
import {Provider} from 'react-redux';

//STEP 3
import reducers from './Reducers/indexReducer';


import App from './App';

const middleware = applyMiddleware(createLogger());

//STEP 1
const store = createStore(reducers,middleware);

ReactDOM.render(
   <Provider store={store}>     
    <App />
    </Provider> 
    ,
  document.getElementById('root')
);

所以我試圖通過瀏覽來使用 axios 並嘗試使用 redux-thunk 但我得到了同樣的錯誤。 請幫我解決這個問題

Answer 1

當您使用 redux 時，您必須返回一個普通的 js object 請參閱本指南在此處輸入鏈接描述

例如：

{
   type: ADD_TODO,
   text: 'Build my first Redux app'
}

在您的情況下執行異步操作，您只需使用中間件，請參閱此

Answer 2

如果您想使用您指定的操作（異步操作），那么您需要使用redux-thunk package。 為此，首先安裝它：

npm install --save redux-thunk

接下來，將其作為中間件連接到您的商店：

import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from "redux-logger";
import { Provider } from 'react-redux';

import reducers from './Reducers/indexReducer';

import App from './App';

const middleware = applyMiddleware(createLogger(), thunk);

const store = createStore(reducers, middleware);

ReactDOM.render(
  <Provider store={store}>     
    <App />
  </Provider>,
  document.getElementById('root')
);

之后，您可以隨意使用您的事件，即：

store.dispatch(getMovies(/* args */));

您可以在此處了解更多信息。

在這里你可以看到一個例子。