react js with redux fetch always return an empty json

Question

I am trying to request an API without ajax call (why would I import the whole library for simply making an ajax call?).

So I decided to follow the fetch function flow as it is described in the Redux doc (which I migrate with last week).

import fetch from 'isomorphic-fetch'

Thus, I have this short function:

export function fetchPosts(value) {
    return dispatch => {
        dispatch(requestPosts(value))
        return fetch(Config.serverUrl + '/' + value, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                Authorization: Config.authorizationToken
            },
        })
          .then(response => response.json())
          .then(json => dispatch(receivePosts(value, json)))
    };
};

but when I do a console.log in this next step function:

function receivePosts(value, json) {
    console.log(json);
    return {
        type: RECEIVE_POSTS,
        value,
        posts: json.data.children.map(child => child.data)
    };
};

I can see that my json is an empty object.

The network return this:

General: Request URL:https://shelob-v2.dev.blippar.com/v2/categories Request Method:OPTIONS Status Code:200 OK Remote Address:52.25.79.166:443

Header: Access-Control-Allow-Headers:Authorization, Content-Type, X-Pouet-UniqueID, X-Pouet-UniqueRunID Access-Control-Allow-Methods:PATCH, PUT, DELETE Access-Control-Allow-Origin:* Content-Length:0 Content-Type:text/plain; charset=utf-8 Date:Wed, 27 Apr 2016 14:14:36 GMT

Am I doing something definitely wrong with it?

Can you look at the request/response in the network tab (chrome)? — azium
– azium, Commented Apr 27, 2016 at 14:13

michaelgmcd · Accepted Answer · 2016-04-27 14:27:33Z

2

Your redux syntax looks correct, but it looks like the request was an OPTIONS request and not a GET request. Try adding method: 'GET' to your fetch options.

export function fetchPosts(value) {
    return dispatch => {
        dispatch(requestPosts(value))
        return fetch(Config.serverUrl + '/' + value, {
            method: 'GET', // here
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                Authorization: Config.authorizationToken
            },
        })
          .then(response => response.json())
          .then(json => dispatch(receivePosts(value, json)))
    };
};

edited Apr 27, 2016 at 14:27

answered Apr 27, 2016 at 14:23

michaelgmcd

2,4492 gold badges21 silver badges24 bronze badges

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

2 Comments

Jay Cee Over a year ago

Indeed, this time my json is filled ! Do you have any idea why I still have this output error: Cannot read property 'children' of undefined ? is the treatment on the json of receivePosts deprecated?

michaelgmcd Over a year ago

It sounds like this code is incorrect: json.data.children.map(child => child.data). I would use network dev tools or add a console.log(json) in your fetchPosts or receivePosts to know exactly what your response looks like and go from there.

Collectives™ on Stack Overflow

react js with redux fetch always return an empty json

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related