javascript reactjs redux reactjs-flux react-redux

javascript - ¿Cuáles son las diferencias entre redux, react-redux, redux-thunk?



redux thunk vs saga (3)

  1. ¿Alguien puede explicar claramente cómo ocurre el flujo de control en redux? Redux tiene (siempre) una sola tienda.

  1. Siempre que desee reemplazar el estado en la tienda, envíe una acción.

  2. La acción es atrapada por uno o más reductores.

  3. El / los reductor / es crean un nuevo estado que combina el estado anterior y la acción despachada.

  4. A los suscriptores de la tienda se les notifica que hay un nuevo estado.

  1. ¿Cuáles son los roles de los componentes / contenedores / acciones / creadores de acciones / store in redux?

  • Tienda: contiene el estado, y cuando llega una nueva acción ejecuta el proceso de envío -> middleware -> reducciones, y notifica a los suscriptores cuando el estado es reemplazado por uno nuevo.

  • Componentes: partes de vista tontas que no son conscientes del estado directamente. También se conocen como componentes de presentación.

  • Contenedores: piezas de la vista que conocen el estado del uso de react-redux. También conocidos como componentes inteligentes y componentes de orden superior

Tenga en cuenta que los contenedores / componentes inteligentes frente a los componentes tontos son solo una buena forma de estructurar su aplicación.

  • Acciones - igual que el flujo - patrón de comando con tipo y carga útil.

  • Creadores de acciones: manera DRY de crear acciones (no estrictamente necesario)

  1. Diferencia entre redux / react-redux / redux-thunk / cualquier otro?

  • Flujo de flujo redux con una sola tienda, que se puede usar en cualquier entorno que desee, incluyendo vanilla js, reaccionar, angular 1/2, etc.

  • react-redux - enlaces entre redux y reaccionar, que crea contenedores (componentes inteligentes) que escuchan los cambios de estado de la tienda, preparan los accesorios para los componentes de presentación (tontos) y los reemplazan.

  • redux-thunk - middleware que le permite escribir creadores de acciones que devuelven una función en lugar de una acción. El thunk se puede utilizar para retrasar el envío de una acción, o para despachar solo si se cumple una determinada condición. Se usa principalmente para llamadas asincrónicas a api, que envían otra acción en caso de éxito / falla.

  1. Sería muy útil si puede publicar enlaces a cualquier tutorial de redux simple y preciso.

Estoy usando React + Flux. Nuestro equipo está planeando pasar de un flujo a otro. Redux es muy confuso para mí viniendo del mundo del flujo. En flux, el flujo de control es simple desde Componentes -> acciones -> Almacenar y almacenar actualizaciones de componentes de respaldo . Es simple y muy claro.

Pero en redux es confuso. No hay tienda aquí, sí, hay algunos ejemplos sin usar la tienda. Revisé varios tutoriales, parece que todos tienen su propio estilo de implementación. Algunos usan Contenedores y otros no. (No conozco este concepto de Contenedores y no puedo entender lo que hace mapStateToProps, mapDispatchToProps).

  1. ¿Alguien puede explicar claramente cómo ocurre el flujo de control en redux?
  2. ¿Cuáles son los roles de los componentes / contenedores / acciones / creadores de acciones / store in redux?
  3. Diferencia entre redux / react-redux / redux-thunk / any others ??
  4. Sería muy útil si puede publicar enlaces a cualquier tutorial de redux simple y preciso .

Para responder la pregunta del título:

¿Cuáles son las diferencias entre redux, react-redux, redux-thunk?

  1. redux: biblioteca principal (independiente de React)
  2. redux-thunk: un middleware redux que te ayuda con las acciones asincrónicas
  3. react-redux: conecta tu tienda redux con ReactComponents
  • redux: biblioteca para gestionar el estado de la aplicación.
  • react-redux: Biblioteca para gestionar el estado de la aplicación React .
  • redux-thunk: un middleware para el registro, informes de fallos, hablar con una API asyn, enrutamiento, etc.