Comprendre les fonctions de composition dans Redux

Question

J'essayais de créer un magasin dans Redux pour lequel j'utilise actuellement la syntaxe suivante: -

 const middlewares = [
  thunk,
  logger
]

const wlStore = createStore(
  rootReducer,
  initialState
  compose(applyMiddleware(...middlewares))
)
 

Ce qui précède fonctionne bien pour moi et je peux accéder au magasin, mais je me suis récemment heurté à une autre syntaxe: -

 const wlStore=applyMiddleware(thunk,logger)(createStore)(rootReducer)
 

Les deux semblent faire le même travail.

Y a-t-il une raison pour laquelle je devrais préférer l'une à l'autre? Avantages / inconvénients?

Answer 1

Amélioration de la lisibilité et le confort sont les principaux avantages de l'utilisation de la composition.

Composer est utilisé lorsque vous souhaitez passer plusieurs magasin exhausteurs de la boutique. Magasin amplificateurs sont des fonctions d'ordre supérieur que d'ajouter quelques fonctionnalités supplémentaires pour le magasin. Le seul magasin enhancer qui est fourni avec Redux par défaut est applyMiddleware cependant beaucoup d'autres sont disponibles.

Magasin amplificateurs sont des Fonctions d'Ordre Supérieur

Ce sont des fonctions d'ordre supérieur? Paraphrase du Haskell docs:

Des fonctions d'ordre supérieur peut prendre les fonctions que les paramètres et le retour des fonctions de retour des valeurs. Une fonction qui ne soit de celles-ci est appelé un ordre plus élevé la fonction

À partir de la Redux docs:

Tous les composent ne se permettent d'écrire profondément imbriqués fonction des transformations sans la dérive vers la droite du code. Ne pas lui donner trop de crédit!

Ainsi, lorsque nous de la chaîne de notre des fonctions d'ordre supérieur (magasin activateurs) au lieu d'avoir à écrire

func1(func2(func3(func4))))

on pourrait simplement écrire

compose(func1, func2, func3, func4)

Ces deux lignes de code à faire la même chose. C'est seulement la syntaxe qui diffère.

Redux Exemple

À partir de la Redux docs si nous n'utilisons pas de composer , nous aurions

finalCreateStore = applyMiddleware(middleware)(
      require('redux-devtools').devTools()(
       require('redux-devtools').persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))()
     )
     )(createStore);

Alors que si nous utilisons le composent

finalCreateStore = compose(
    applyMiddleware(...middleware),
    require('redux-devtools').devTools(),
    require('redux-devtools').persistState(
      window.location.href.match(/[?&]debug_session=([^&]+)\b/)
    )
  )(createStore);

Pour en savoir plus sur Redux de composer de la fonction , cliquez ici