web-dev-qa-db-fra.com

Pourquoi utiliser redux-thunk?

Je ne comprends pas la nécessité de quelque chose comme redux-thunk. D'après ce que je comprends, un thunk est une fonction qui renvoie une fonction. Les expressions encapsulées et l'utilisation de middleware me semblent faire plus pour obscurcir ce qui se passe. Tiré de l'exemple de code de redux-thunk

import thunk from 'redux-thunk';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


// Meet thunks.
// A thunk is a function t hat returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

Le code ci-dessus pourrait être écrit de manière beaucoup plus concise et intuitive:

fetchSecretSauce().then(
  sauce => store.dispatch(makeASandwich('Me', sauce)),
  error => store.dispatch(apologize('The Sandwich Shop', forPerson, error))
)

Ma question est de savoir quel besoin satisfait redux-thunk Et comment améliore-t-il les solutions existantes similaires à l'exemple ci-dessus.

javascriptreactjstypescriptreact-reduxredux-thunk
20
micahblu

Redux Thunk enseigne à Redux à reconnaître des types spéciaux d'actions qui sont en fait des fonctions.

Lorsqu'un créateur d'action renvoie une fonction, cette fonction est exécutée par le middleware Redux Thunk. Cette fonction n'a pas besoin d'être pure; il est donc autorisé d'avoir des effets secondaires, y compris l'exécution d'appels d'API asynchrones. La fonction peut également envoyer des actions.

Le thunk peut être utilisé pour retarder l'envoi d'une action, ou pour envoyer uniquement si une certaine condition est remplie.

Si le middleware Redux Thunk est activé, chaque fois que vous essayez de distribuer une fonction au lieu d'un objet action, le middleware appellera cette fonction avec la méthode de répartition elle-même comme premier argument.

Et puis, puisque nous avons "appris" à Redux à reconnaître de tels créateurs d'actions "spéciales" (nous les appelons créateurs d'action thunk), nous pouvons maintenant les utiliser dans n'importe quel endroit où nous utiliserions des créateurs d'actions ordinaires.

Vérifiez cette excellente réponse de Dan Abramov lui-même, elle couvre tout: https://stackoverflow.com/a/35415559/57149

Consultez également ces liens pour plus d'informations:

https://github.com/gaearon/redux-thunk#motivationhttp://redux.js.org/docs/advanced/AsyncActions.html

15
Mo Ismat