Where I handle API calls in react-native and redux Where I handle API calls in react-native and redux reactjs reactjs

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