web-dev-qa-db-fra.com

Comprendre les fonctions de composition dans Redux

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?

reduxreact-redux
49
Harkirat Saluja

Amélioration de la lisibilité et de la commodité sont les principaux avantages de l’utilisation de compose.

Compose est utilisé lorsque vous souhaitez transmettre plusieurs optimiseurs de magasin au magasin. Les rehausseurs de magasin sont des fonctions d'ordre supérieur qui ajoutent des fonctionnalités supplémentaires au magasin. Le seul enrichisseur de magasin fourni avec Redux par défaut est applyMiddleware, mais de nombreux autres sont disponibles.

Les optimiseurs de magasin sont des fonctions d'ordre supérieur

Quelles sont les fonctions d'ordre supérieur? Paraphrasé à partir de la documentation Haskell :

Les fonctions d'ordre supérieur peuvent prendre des fonctions en tant que paramètres et des fonctions en tant que valeurs de retour. Une fonction qui effectue l'une de ces tâches s'appelle une fonction d'ordre supérieur

De la documentation Redux:

Tout ce que compose fait vous permet d’écrire des transformations de fonctions profondément imbriquées sans dérive du code vers la droite. Ne donnez pas trop de crédit!

Donc, lorsque nous enchaînons nos fonctions d’ordre supérieur (enrichisseurs de magasins) au lieu d’avoir à écrire

func1(func2(func3(func4))))

nous pourrions simplement écrire

compose(func1, func2, func3, func4)

Ces deux lignes de code font la même chose. Ce n'est que la syntaxe qui diffère.

Exemple Redux

À partir de la documentation Redux si nous n'utilisons pas compose nous aurions

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

Alors que si on utilise compose

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 la fonction de composition de Redux cliquez ici

119
therewillbecode