CODEWITHSUNDEEP
javascriptreactjsredux
Гриша Кисенко
Гриша Кисенко

Reputation: 27

redux-react error: Actions must be plain objects

i`m learning redux and after setting all the setup i get this message: 

    Error: Actions must be plain objects. Use custom middleware for async actions.

I readed 10 different issues with this mistake but not single solution works for me. here is my project on github, in case problem not in following code:https://github.com/CodeNinja1395/Test-task-for-inCode/tree/redux

store:

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];


const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(thunk)
);

export default store;

actions:

import {FETCH_DATA} from './types';

export const fetchData = () => dispatch => {
  fetch('https://raw.githubusercontent.com/CodeNinja1395/Test-task-for-inCode/master/clients.json')
    .then(posts =>
      dispatch({
        type: FETCH_DATA,
        payload: posts
      })
    );
};

Upvotes: 2

Views: 78

Answers (2)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36219

You use an old version of redux - v1, while the new version is v4. When you upgrade to v4 it works.

npm install redux@^4.0.0

Upvotes: 1

tlm
tlm

Reputation: 1022

You're not returning your fetch() call. You have to make sure you return your fetch call inside of the action creator.

export function fetchData() { 
    return function(dispatch) {
        return fetch( ... ).then( ... ).catch( ... )
    }
}


export const fetchData = (params) => dispatch => {
    dispatch(beginAjaxCall());
    return fetch(...).then(response => {
        dispatch(someFunction(response));
    }).catch(error => {
      throw(error);
    });
}


export const loadIncidents = (params) => dispatch => {
    dispatch(beginAjaxCall());
    return IncidentsApi.getIncidents(params).then(incidents => {
       dispatch(loadIncidentsSuccess(incidents));
    }).catch(error => {
        throw(error);
    });
}

The top is ES5, middle ES6, and third is an ES6 version of a function that I used in a project.

Hope that helps.

Upvotes: 0

Related Questions