React redux async action

Question

I have been trying to implement redux into my React app and using this guide to make ajax calls.

My code is almost identical to his, except I get the error:

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

I've looked all through his code and he isn't applying middleware or doing anything out of the ordinary

My async action

import axios from 'axios';

const GET_POSTS = 'GET_POSTS';
const getPosts = () => {
    const request = axios.get('/url');
    return { type: GET_POSTS, payload: request };
};

My container usage

import { getPosts } from './actions';

//other stuff

const mapDispatchToProps = dispatch => {
    return {
        getPosts: () => {
            dispatch(getPosts()).then(response => {
                console.log(response);
            });
        }
    };
};

//connect functions to component

My guess is that his example just doesn't work? I've looked all over for solutions, and I understand that dispatch returns whatever the function returns (which isn't a promise in this case). I understand that if I want the function to return a promise I will have to use a middleware. I'm just confused on whether I'm doing something wrong currently (and what that is), or if it is his example that is broken? Thanks for the help

Bartek Fryzowicz · Accepted Answer · 2017-05-23 09:02:42Z

4

In guide you're using middleware is applied. Plese check 'STEP 8':

...
import promise from 'redux-promise';
...

//Configure middleware w/ redux-promise for AJAX requests
const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

answered May 23, 2017 at 9:02

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin F Over a year ago

I see it now in the store file: github.com/rajaraodv/react-redux-blog/blob/master/public/src/… I got confused because I thought middleware was applied during combineReducers. Thanks!

Collectives™ on Stack Overflow

React redux async action

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related