Fetch data from API wtih Redux

Question

Recently I've been looking into react and redux. I read up the official documentation and tried some ToDo List tutorials. Part 1 is just about react and this is part 2 about redux:

http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/

So basically he just sets up a store and initially adds an array of a few todos. Now I don't want my data to be local and I want to fetch it from an API. I'm having a hard time understanding how this actually works. So the code I would use in my action_creators.js is:

export function fetchData() {
    return dispatch => {
        fetch('http://127.0.0.1:8000/example')
            .then(res => res.json())
            .then(res => dispatch({
                type: FETCH_DATA,
                data: res
            }))
    }
}

Now in the example code for example adding a 'todo':

export function addItem(text) {
    return {
        type: 'ADD_ITEM',
        text
    }
}

You aren't dispatching anything, the tutorial does this in the reducer? But when you return dispatch your fetch, does this automatically get dispatched to your store?

If so I have no clue what I should write in my reducer .. This is the code I have for adding a 'todo':

import {Map} from 'immutable';

function setState(state, newState) {
    return state.merge(newState);
}

function fetchData(state) {
    return state;
}

function addItem(state, text) {
    const itemId = state.get('hostnames').reduce((maxId, item) => Math.max(maxId,item.get('id')), 0) + 1;
    const newItem = Map({id: itemId, text: text, status: 'active'});
    return state.update('hostnames', (hostnames) => hostnames.push(newItem));
}

export default function(state = Map(), action) {
    switch (action.type) {
        case 'SET_STATE':
            return setState(state, action.state);
        case 'ADD_ITEM':
            return addItem(state, action.text);
        case 'FETCH_DATA':
            return fetchData(state);
    }
    return state;
}

So basically my question is, how do I fetch the data ( if the fetch is wrong now ) and how do I add the fetched data from my api to the store in my reducer.

I just find react and redux pretty complicated so sorry if I'm asking a really noob question or just making big mistakes in the way I want to do something.

Thanks in advance for any help.

Jackie Huang · Accepted Answer · 2016-04-19 18:56:04Z

imagine your json

{
    "data": {
        "apple": 1,
        "banana": 3,
    },
    "status": 200,
}

your actions

export function fetchData() {
    return dispatch => {
        fetch('http://127.0.0.1:8000/example')
            .then(res => res.json())
            .then((responseData) => {
                if(responseData.status === 200){
                    dispatch(setData(responseData));
                }
            })  
    }
}

export function setData(responseData) {
 return {type: SET_DATA, data: responseData.data }
}

your reducer

const initialState = { data: null };

export default function(state = initialState, action) {
    switch (action.type) {
        case 'SET_DATA':
            return Object.assign({}, state, {
                data: action.data,
            })
        default:
        return state;
    }
}

then your state will become

{ data: {
        apple: 1,
        banana: 3,
    }
}

Voice · Accepted Answer · 2016-04-19 13:59:27Z

2

Actually, all your reducers should be pretty dumb and pure (without any side effects). So their only concern is to modify the state and nothing else. Fetching data from the server or any kind of orchestration should be implemented in redux middleware. Look at redux-thunk or redux-saga if you need something more complicated. Hope that helps.

answered Apr 19, 2016 at 13:59

Voice

1,55716 silver badges32 bronze badges

1 Comment

Matthias Over a year ago

Ok the answer is not really what I'm looking for but looking into them helped me a bit. I just copied the code kinda wrong because the action now returns a function which is usefull for if you want to do async calls. At the moment I'm not that interested in it so I should just do a return instead of return dispatch.

Collectives™ on Stack Overflow

Fetch data from API wtih Redux

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related