web-dev-qa-db-fra.com

Comment envoyer plusieurs actions les unes après les autres

Dans mon application react/redux, je souhaite souvent envoyer plusieurs actions les unes après les autres.

Dans l'exemple suivant: Après une connexion réussie, je souhaite stocker les données de l'utilisateur et après celui-ci, je souhaite lancer une autre action asynchrone qui charge la configuration de l'application à partir du serveur.

Je sais que je peux utiliser redux-thunkpour créer un créateur d'action comme celui-ci.

function loginRequestSuccess(data) {
  return function(dispatch) {
    dispatch(saveUserData(data.user))
    dispatch(loadConfig())
  }
}

Donc mes questions sont:

  1. Lorsque la première dispatch retourne, l’état est-il déjà modifié par tous les réducteurs à l’écoute de cette action? Je me demande si les deux appels de dispatch sont gérés de manière strictement séquentielle.
  2. Cette approche est-elle considérée comme la meilleure pratique pour la répartition de plusieurs actions? Si non, que suggéreriez-vous alternativement?

Merci pour toute aide!

reactjsredux
17
Steve

Oui, redux-thunk vous permet de faire ce que vous dites, et oui, il s'agit d'une pratique recommandée pour l'envoi de plusieurs actions (une que je préfère par rapport aux alternatives en raison de sa simplicité). L’état est en effet mis à jour dès que vous envoyez (au moment où il retourne), c’est pourquoi on vous attribue une fonction permettant de récupérer l’état dans un thunk, au lieu d’une simple référence à l’état. De cette façon, vous pouvez modifier l'état avec une seule répartition, puis appeler getState () pour obtenir une référence au nouvel état, à lire si vous en avez besoin.

10
John

redux-thunk est exactement ce que vous recherchez. Je considère que c'est une très bonne pratique.

Pour répondre à votre question, lorsque le premier envoi retourne, l'état est déjà modifié par les réducteurs appelés.

3
mguijarr

Je sais que c'est une réponse tardive :-P Vous pouvez le faire en utilisant Redux-Thunk et aussi en allant sur Redux-Saga. Redux Saga offre un moyen incroyable de gérer plusieurs actions en même temps. Vous trouverez ci-dessous un exemple d'envoi de plusieurs actions à l'aide de Redux-Thunk.

function getAndLoadSider(moduleName){
    return function(dispatch){
        return doSomeApiCall(someData).then(function(item){
            let _item = someOtherFunction(item.collections);
                let _menuData = {
                    name: item.name,
                    key: item.key
                };
            return new Promise(function(res, rej){
                dispatch(actionOne(_menuData));
                res(_item);
            }).then((_item) =>  dispatch(actionTwo(_item)))
    }
}

La méthode ci-dessus fonctionne bien pour votre cas lorsqu'une action dépend de la première. C'est une approche basée sur des promesses. Si vous n'aimez pas faire beaucoup de codage Promise, je vous recommande de choisir Sagas. Consultez ce lien https://redux-saga.js.org/docs/advanced/ComposingSagas.html où vous apprendrez à composer des sagas. Courbe d'apprentissage est raide; mais une fois que vous avez terminé, Sagas vous fera devenir un ninja redux dev.

J'espère que cela t'aides :-)

0
Abhay Shiro