web-dev-qa-db-fra.com

React Redux - L'ajout de la méthode asynchrone dans un réducteur est-il un anti pattern?

Je suis assez nouveau dans le monde React-Native/Redux, alors peut-être que cette question semblera stupide :)

Je sais que pour un appel d'API, ou des trucs comme ça, la convention est d'utiliser un middleware, mais est-ce toujours nécessaire? (Il ajoute beaucoup de passe-partout).

J'ai ajouté avec succès une méthode asynchrone dans un réducteur pour gérer une connexion API d'appareil, telle que les notifications intégrées ou les notifications locales, mais je me demande si c'est correct de la gérer de cette façon.

Par exemple, dans mon réducteur, il y a cette méthode:

function initInApp(state, itemSkus){
  init(state, itemSkus);
  return {
    ...state,
    itemSkus: itemSkus,
  }
}

Et celui-ci, qui gère la partie asynchrone:

async function init(state, itemSkus){
  try {
    if( !state.isInit ){
      const prepare = await Promise.all(RNIap.prepareAndroid());
      return{
        ...state,
        isInit: true,
        errorCode: false,
      }
    }
    else {
       return ...state;
    }
  } catch (errorCode) {
    return{
      ...state,
      isInit: false,
      errorCode: errorCode,
      itemSkus: itemSkus
    }
  }
}

Peut-être que ce n'est pas efficace en termes de performances ou difficile à maintenir .. Que pensez-vous de cela?

Merci :)

reactjsreact-nativeredux
11
alan_langlois

Oui. Les réducteurs ne devraient avoir aucun effet secondaire . Les réducteurs doivent être des fonctions pures pour que redux fonctionne efficacement. Voici quelques liens qui tentent d'expliquer pourquoi redux a besoin de réducteurs pour être des fonctions pures et pourquoi les réducteurs purs sont-ils si importants dans redux .

Comme d'autres l'ont indiqué, le middleware thunk est un moyen courant de gérer l'asynchrone en réaction.

Une autre méthode, qui ne nécessite aucune bibliothèque, consiste à utiliser un modèle appelé "Fat Action Creators". Les créateurs d'actions peuvent gérer les opérations asynchrones. Pour ce faire, ils retournent un wrapper "dispatch" autour de la fonction, afin qu'elle puisse elle-même envoyer des actions.

Voici un exemple de cela tiré de l'article moyen:
Où dois-je placer ma logique métier dans une application React-Redux
(Cet article est également lié à la FAQ redux ):

const fetchUser = (dispatch, id) => {
  dispatch({ type: USER_FETCH, payload: id });
  axios.get(`https://server/user/${id}`)
   .then(resp => resp.data)
   .then(user => dispatch({ type: USER_FETCH_SUCCESS, 
                            payload: user }))
   .catch(err => {
     console.error(err); // log since might be a render err
     dispatch({ type: USER_FETCH_FAILED, 
                            payload: err, 
                            error: true });
   });
};

Les packages autres que redux-thunk incluent:

  • https://www.npmjs.com/package/redux-logic

    "Un seul endroit pour toute votre logique métier et tous vos effets secondaires" "Avec redux-logic, vous avez la liberté d'écrire votre logique dans votre style JS préféré:`

    • code de rappel simple - dispatch (resultAction)
    • promesses - retourner axios.get (url) .then (...)
    • async/wait - résultat = wait fetch (url)
    • observables - ob $ .next (action1) `

  • redux-saga

    redux-saga est une bibliothèque qui vise à rendre les effets secondaires des applications (c'est-à-dire des choses asynchrones comme la récupération de données et des choses impures comme l'accès au cache du navigateur) plus faciles à gérer, plus efficaces à exécuter, simples à tester et mieux à gérer les échecs. uses generators so make sure you're confortable using them.

  • redux-observable , si vous préférez RxJS Observables
    Cette bibliothèque a été créée par Jay Phelps, et ce moyen post "redux-observable" a été écrit par Ben Lesh. Tous deux bien connus dans la communauté React.

  • redux-thunk Pour être complet.

  • Des packages supplémentaires sont répertoriés dans l'article mentionné précédemment:
    Où dois-je placer ma logique métier dans une application React-Redux

Bonne chance !

9
SherylHohman

Les réducteurs en réaction ont pour seul but de passer à un état plus récent. Oui, aucun appel Api ou autre "action" ne doit être effectué dans le réducteur, c'est un anti-pattern. Vous pouvez utiliser divers modules d'action asynchrone comme react-thunk pour effectuer des actions asynchrones

3
Chromonav

Dans un projet sur lequel je travaille, nous mettons le code asynchrone en actions et utilisons un "middleware" appelé "thunk" pour résoudre les promesses aux objets qui peuvent être consommés par nos réducteurs. Tous les réducteurs sont écrits comme des méthodes synchrones qui prennent state et un action et retournent un nouveau state.

2
Code-Apprentice