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

app.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 对象，请参阅本指南enter link description here

例如：

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

在您执行异步操作的情况下，您只需使用中间件 see this

Answer 2

如果您想使用您指定的操作（异步操作），那么您需要使用 redux-thunk 包。为此，首先安装它：

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 */));

You can learn more about this here.

And here you can see an example.