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

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,
    }
}

Fetch data from API wtih Redux

Answers (2)

Related Questions