CODEWITHSUNDEEP
javascriptasynchronousreact-redux
Kevin F
Kevin F

Reputation: 2885

React redux async action

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

Example Actions Example Container

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

Upvotes: 1

Views: 133

Answers (1)

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6684

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

Upvotes: 4

Related Questions