Redux LOADING / SUCCESS / ERROR pattern - quando usi redux-saga

Question

Redux LOADING / SUCCESS / ERROR pattern - quando usi redux-saga

#1 da (1 voti)

0

In una tipica app Web, di solito dobbiamo affrontare il problema CARICAMENTO / SUCCESSO / ERRORE, ovvero:

Quando faccio una richiesta di back-end voglio visualizzare un cursore di caricamento, forse disabilitare alcuni pulsanti.
Quando la richiesta termina correttamente, voglio visualizzare i dati.
Quando la richiesta termina con un errore - Voglio visualizzare o gestire l'errore.

Se non stai attento, questo può portare al codice spaghetti - specialmente se stai facendo cose come avere due richieste in esecuzione allo stesso tempo, e gestirlo quando una richiesta termina, non ferma il cursore di caricamento per l'altro elemento, per esempio.

Solo per ridire - Ho trovato questa soluzione che ho trovato funziona abbastanza bene.

Fondamentalmente si definiscono tre azioni:

GET_FOO_REQUEST
GET_FOO_SUCCESS
GET_FOO_FAILURE

e quindi ha un riduttore generico che intercetterà tutte le richieste e imposterà nello stato di redux lo stato di caricamento e di errore, per quel particolare tipo di richiesta (in questo caso GET_FOO ).

È quindi possibile selezionare per lo stato di caricamento o di errore sul componente che ne ha bisogno:

const loadingSelector = createLoadingSelector(['GET_FOO']);

const mapStateToProps = (state) => ({ isFetching: loadingSelector(state) });

La mia domanda è - se sto usando redux-saga - questo modello si applica ancora bene - o la saga di redux già risolve questo problema?

redux redux-saga saga

posta dwjohnston 30.11.2018 - 01:33

fonte

1 risposta

Leggi altre domande sui tag redux redux-saga saga

Qual è lo scopo dei test xfail? Decisione di progettazione per un editor di testo multipiattaforma ottimizzato per la velocità

score 1 · Answer 1

Sì, questo modello si applicherà bene con la saga di Redux.

Pensa a redux saga come a un livello middleware in Redux. Fondamentalmente quando invii un'azione nel tuo codice, la saga di redux intercetterà quell'azione e quindi può essere usata per fare cose asincrone come chiamare un'API o modificare i dati e chiamare altre azioni.

Quindi, nel caso del tuo esempio, quando invii GET_FOO_REQUEST dovresti avere un setup listener nella tua saga per quell'azione. Quindi la funzione saga può apparire così:

Azione di invio per attivare lo stato di caricamento in redux
Invia la richiesta API
- Se ha successo, invia GET_FOO_SUCCESS
- Se l'errore si verifica, GET_FOO_FAILURE

Quindi nel tuo riduttore per GET_FOO_SUCCESS / FAILURE dovresti disattivare lo stato di caricamento e fare qualsiasi altra cosa ti serva.

Puoi scrivere tu stesso il codice boilerplate, tuttavia una libreria interessante che puoi usare è redux-saga-routines , creerà automaticamente 5 diversi tipi di azione per questo scopo:

routine.TRIGGER
routine.REQUEST
routine.SUCCESS
routine.FAILURE
routine.FULFIL

Ecco un esempio di saga che utilizza questi tipi di azione:

function* callAPI(action) {
  yield put(routine.REQUEST());
  try {
    const response = yield call(api, 'GET', '/foo/endpoint');
    yield put(routine.SUCCESS(response.data))

  } catch(err) {
      yield put(routine.FAILURE(err.message));

  } finally {
      yield put(routine.FULFILL());
  }

}