javascript - react - redux thunk

¿Cuáles son los beneficios de usar middleware thunk en redux sobre el uso de funciones regulares como creadores de acciones asíncronas?

Question

He estado utilizando redux durante aproximadamente dos meses y recientemente comencé a explorar diferentes formas de lidiar con el comportamiento asíncrono, como la obtención de datos. De la documentación y de las discusiones en GitHub se desprende que la forma estándar de hacerlo utilizando el middleware thunk es un concepto bastante simple. Sin embargo, no estoy seguro si entiendo el beneficio que conlleva la responsabilidad de ejecutar máquinas de estado asíncronas para reducir middleware cuando se podría haber usado una función independiente simple.

Enfoque tradicional de Redux utilizando middleware thunk

Async Action Creator fetchPosts

function fetchPosts(reddit) {
  return dispatch => {
    dispatch(requestPosts(reddit))
    return fetch(`http://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(reddit, json)))
  }
}

Entonces, tal vez en un componente ReactJS uno puede tener un botón como el siguiente.

Despachar fetchPosts

<button onClick={() => this.props.dispatch(fetchPosts(this.props.reddit))} />

Este botón al hacer clic llama a los solicitantes de solicitud de creador de acciones asíncronas, que devuelve una función que acepta el envío y es responsable de llevar a cabo cualquier código asíncrono que pueda tener efectos secundarios y también despachar las acciones reales que puedan producirse.

Un ejemplo un tanto más simple sin middleware thunk

Si bien lo anterior es completamente comprensible, no está claro por qué uno no preferiría simplemente hacer algo un poco más simplista, como en el ejemplo a continuación.

Delegación de la distribución asincrónica sin un creador de acciones

function fetchPosts(dispatch, reddit) {
  dispatch(requestPosts(reddit))
  return fetch(`http://www.reddit.com/r/${reddit}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(reddit, json)))
}

Llamar a la función fetchPosts y pasar el despacho como argumento.

<button onClick={() => fetchPosts(this.props.dispatch, this.props.reddit)} />

Conclusión

Basándome en los dos ejemplos uno al lado del otro, no veo cómo el creador de acciones asíncronas que utiliza el middleware thunk me compra nada y requiere una complejidad añadida para configurar el middlware e introduce dos variedades de creadores de acciones (1) funciones puras que devuelven un único acción que se enviará (2) funciones impuras que retroalimentarán acciones y tal vez otros problemas en el despachador. Siento que me falta algo aquí que explicaría los beneficios de enviar algo más que una acción inmutable en redux.

Answer 1

Este es un territorio muy bueno. Diría que es un sentimiento común que los creadores de acciones asíncronas no son particularmente satisfactorios, pero hay buenas razones para preferir Redux Thunk al enfoque completamente manual. Pero es solo uno de varios enfoques posibles. Ver ¿Por qué necesitamos middleware para flujo asíncrono en Redux? .

Creo que la comunidad probablemente se conformará con algo más que Redux Thunk a largo plazo, pero su simplicidad lo convierte en un buen punto de partida.