REACT-REDUX：未捕获错误：操作必须是普通对象

Question

Below is the code to fetch movies using React-Redux. I have used fetch() to fetch thedata from API, but i got the error as "Uncaught Error: Actions must be plain objects. Use custom middleware for async actions."

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

So i have tried to use axios by browing and tried to use redux-thunk but i got the same error. Please help me to resolve this issue

Answer 1

When you are using redux you have to return a plain js object see this guide enter link description here

for ex:

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

in your case to perform a async action you simply use a middleware see this

Answer 2

If you want to use actions as indicated by you (async actions), then you need to use the redux-thunk package. To do this, first install it:

npm install --save redux-thunk

Next, connect it as middleware to your store:

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

After that, you can use your event as you would like, that is:

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

You can learn more about this here.

And here you can see an example.