Skip to content

Instantly share code, notes, and snippets.

@ncuillery
Last active February 17, 2020 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ncuillery/924606195a960709e6478cd123fe7e02 to your computer and use it in GitHub Desktop.
Save ncuillery/924606195a960709e6478cd123fe7e02 to your computer and use it in GitHub Desktop.
Explication epic
import { ajax } from 'rxjs/ajax';
// action$ c'est le stream de TOUTES les actions Redux de l'application, c'est un observable qui émet chaque fois qu'une action Redux est dispatchée
const fetchUserEpic = action$ => action$.pipe(
// ofType: On filtre le stream pour ne déclencher un traitement que sur l'action qui nous intéresse.
ofType(FETCH_USER),
// quand l'observable filtré émet, ca veut dire qu'une action FETCH_USER a été dispatché. Le mergeMap (ou switchMap) créé un "sous-observable" qui va être dédié au traitement de cette action en particulier
mergeMap(action => {
// Voilà le sous-observable qu'on va retourner: On veut un observable qui émet quand l'appel réussi ou échoue
const apiCall$ = ajax.getJSON(`/api/users/${action.payload}`);
// A vérifier mais je pense que c'est équivalent:
// const apiCall$ = from(axios.get(`/api/users/${action.payload}`));
// En même temps qu'on retourne le sous-observable, on définit le traitement qu'on va appliquer quand il émet:
return apiCall$.pipe(
map(response => fetchUserFulfilled(response)), // Dispatch l'action de success en cas de success
catchError(error => of({ // Dispatch l'action de failure en cas d'error
type: FETCH_USER_REJECTED,
payload: error.xhr.response,
error: true
}));
}
))
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment