Where I handle API calls in react-native and redux
Your app structure is sound.
I also recommand the usage of redux-thunk to handle the dispatch. Here is how it would work in your case:
Let's say you have 'cases' as part of your state tree.I would put the API call in your action as you suggested to fetch new cases:
import * as types from './casesTypes'export function getCases() { return fetch(...) ... .then((json) => { dispatch({ type: types.RECEIVED_CASES, isLoading: false, cases: json, }}
And now in your reducer just get the newly dispatched action to merge the new cases with the state tree:
const initialState = fromJS({ isLoading: false, cases: null})export default function cases(state = initialState, action = {}) { switch(action.type) { case types.REQUEST_CASES: return state.set('isLoading', true) case types.RECEIVED_CASES: return Object.assign({}, state, { cases: state.cases.merge(action.cases), }); default: return state }}
I am currently working with this structure and it works pretty well. Hope that helps!
You should try out redux-thunk or redux-saga, They are redux middlewares created to handle asynchronous actions like making an API call.
check out this project that used redux-thunk: sound-redux-native