Comment envoyer plusieurs actions l'une après l'autre

dans mon application react / redux, j'ai souvent envie d'envoyer plusieurs actions après une autre.

etant Donné l'exemple suivant: Après une connexion réussie je veux stocker les données de l'utilisateur et après je veux lancer une autre action async qui charge la configuration de l'application depuis le serveur.

je sais que je peux utiliser redux-thunk pour construire un créateur d'action comme ceci

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

Donc mes questions sont:

  1. quand le premier dispatch retours, l'état est-il déjà changé par tous les réducteurs à l'écoute de cette action? Je me demande si les deux appels sont strictement séquentiels.
  2. cette approche est-elle considérée comme une pratique exemplaire pour l'envoi d'actions multiples? Si non, que suggéreriez-vous sinon?

merci de votre aide!

16
demandé sur Steve 2016-07-27 17:47:36

3 réponses

Oui redux-thunk vous permet de faire ce que vous dites, et oui c'est une bonne pratique pour envoyer plusieurs actions (une que je préfère par rapport aux alternatives à cause de sa simplicité). L'état est effectivement mis à jour dès que vous l'envoyez (au moment où il retourne), c'est pourquoi on vous donne une fonction pour 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 un envoi, et ensuite appeler getState() pour obtenir une référence à l'état neuf à lire si vous en avez besoin.

10
répondu John 2016-07-27 14:59:43

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

pour répondre à votre question, en effet lorsque la première expédition retourne l'état est déjà modifié par les réducteurs appelés.

3
répondu mguijarr 2016-07-27 14:56:22

je sais que c'est une réponse tardive :-P Vous pouvez le faire en utilisant Redux-Thunk et aussi checkout Redux-Saga. Redux Saga fournit une façon étonnante de gérer des charges d'actions en même temps. Voici un exemple d'envoi d'actions multiples en utilisant 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)))
    }
}

méthode ci-Dessus fonctionne bien pour votre cas quand une action est dépendante de la première. C'est une promesse. Si vous n'aimez pas faire beaucoup de codage de promesse je vous recommande d'aller pour Sagas. Consultez ce lien https://redux-saga.js.org/docs/advanced/ComposingSagas.html où vous apprendrez à composer des sagas. La courbe d'apprentissage est raide, mais une fois que vous avez terminé, Sagas fera de vous un ninja redux dev.

Espérons que cela aide :-)

0
répondu Abhay Shiro 2018-03-25 05:25:22