Exécution d'actions asynchrones dans l'ordre avec Redux et React

Question

Dans mon application React/Redux, j'ai des objets personnalisés group. Je veux avoir une page qui affiche une liste récapitulative de tous les groupes à côté d'une vue détaillée du groupe actuellement sélectionné (par défaut le premier groupe de la liste). Je dois demander une liste de groupes (/groups) à partir de mon api de repos, obtenir le id du premier groupe (du magasin?) Et mettre cela à la selected group puis faire une demande get pour retourner une liste des membres de la groupe sélectionné (/groups/${id}/members)

Je suis très nouveau à React/Redux et je ne suis pas sûr de savoir comment coder. Devrais-je écrire ceci comme trois actions séparées et puis-je faire en sorte qu'un composant de réaction appelle ces actions en utilisant les résultats de l'action précédente? Ou devrais-je placer la logique pour cela dans un gestionnaire d'action combiné en utilisant thunk middleware? Comment écrirais-je un tel gestionnaire d'actions dans ce cas?

Answer 1

Il serait probablement préférable d'écrire 3 actions, puis les enchaîner en utilisant Thunk. De plus, toutes les requêtes sont asynchrones, elles devront donc utiliser Thunk ou une autre méthode asynchrone. Ainsi, les demandes de /groups et /groups/${id}/members seront thunks à la recherche quelque chose comme ça (fonctions de direction que par souci de brièveté):

export const requestGroups =() => (
 
    (dispatch) => { 
 
    // Maybe dispatch an action here that says groups are loading, 
 
    // for showing a loading icon or something 
 
    return fetch('/groups').then((response) => (
 
     dispatch(updateGroups(response)) 
 
     // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response }) 
 
    ) 
 
    } 
 
)

Où updateGroups est une action qui envoie les données de réponse aux réducteurs à mettre en état. Et assurez-vous que ces thunks renvoient des promesses afin que vous puissiez les enchaîner plus tard. Vous aurez probablement aussi envie de faire une erreur de gestion ici.

Ensuite, une fois que vous avez ces trois actions, vous pouvez faire un thunk qui les réunit tous:

export const initializeGroups =() => (
 
    (dispatch, getState) => (
 
    dispatch(loadGroups()).then(() => { 
 
     const { groups } = getState(); // Or wherever the list is 
 
     setSelectedGroup(groups[0]); 
 
     return getGroupData(groups[0]); 
 
    }).then(() => { 
 
     // Dispatch an action saying everything is done, or do any other stuff here. 
 
    }).catch((error) => { 
 
     // Do any error handling 
 
    }); 
 
) 
 
)