Wo ich API behandeln ruft in reagieren-native und redux

Question

Ich baue eine Android-App react-native + redux + immutable

ich meine App wie diese

/src 
-/components 
-/actions (where I have action types and actions) 
-/reducers 
-/api (I'm not sure if I'm doing this right) 

Ok strukturiert, so habe ich eine mit Aktion, wo ich einen API-Aufruf zu machen, mit wie folgt holen:

import * as types from './casesTypes' 

export function getCases() { 
    return { 
     type: types.GET_CASES 
    } 
} 

Dies ist der Fall Minderer:

Also, die Sache ist, dass ich nicht wirklich verstehe, wo sollte ich den API-Aufruf machen, so dass im Reduzierer ich meinen Ausgangszustand mit dem verschmelzen kann, was ich vom API-Aufruf empfange?

Answer 1

Ihre App-Struktur ist gesund.

Ich empfehle auch die Verwendung von Redux-Thunk, um den Versand zu behandeln. Hier ist, wie es in Ihrem Fall funktionieren würde:

Nehmen wir an, Sie haben "Fälle" als Teil Ihres Zustandsbaums. Ich würde die API-Aufruf in Ihrer Aktion setzen, wie Sie neue Fälle holen vorgeschlagen:

import * as types from './casesTypes' 

export function getCases() { 
    return fetch(...) 
      ... 
      .then((json) => { 
       dispatch({   
       type: types.RECEIVED_CASES, 
       isLoading: false, 
       cases: json, 
       } 
} 

Und jetzt in Ihrem Minderer bekommen nur die neu ausgeführten Aktion die neuen Fälle mit dem Zustand Baum zu fusionieren:

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

Ich arbeite derzeit mit dieser Struktur und es funktioniert ziemlich gut. Ich hoffe, das hilft!

Answer 2

Sie sollten versuchen, redux-thunk oder redux-saga, Sie sind Redux Middlewares erstellt, um asynchrone Aktionen wie einen API-Aufruf zu behandeln.

Überprüfung dieses Projekt aus, das Redux-Thunk verwendet: sound-redux-native