Consejos sobre cómo trabajar con React, Redux, Reselect y Redux Saga

Este artículo está dirigido a quienes acaban de comenzar a adoptar ReactJS, Redux, Reselect y Redux Sagas para mejorar la forma en que tratamos el trabajo diario con estas bibliotecas.

Después de aprender los 4, la mayoría de los desarrolladores no saben qué hacer con estas bibliotecas, ¿por dónde empiezo cuando necesito componer un componente?

He tenido problemas con este problema varias veces antes de darme cuenta de los patrones (no soy inteligente). Esto es lo que he estado haciendo durante un mes:

Saltando entre cosas como locos

Primero analizo los requisitos y el diseño y decidí crear un componente de reacción, luego me lanzo directamente a él.

Escribí un componente, luego me doy cuenta de que necesito conectarlo con algún tipo de accesorios (propiedades) que no estoy completamente consciente de lo que son en este momento.

Creé los accesorios, luego me di cuenta de que si estoy haciendo esto, este es un componente contenedor (componente que asume la responsabilidad de conectarse a la tienda para obtener accesorios).

Entonces tengo que crear otro componente de presentación (renderizando el componente ui).

Luego hay algunas acciones que deben enviarse desde el componente contenedor, luego paso a crear algunas acciones, pero las acciones deben tener una constante predefinida (no quiero explicar por qué definir constante aquí).

Muchos saltos antes de llegar a un estado casi terminado. En este momento, he omitido algunas acciones y estados que deberían definirse, luego vuelvo a saltar. Este es un proceso doloroso, así que ayudaré a algunos novatos a tener un buen comienzo.

Rey del salto :)

Consejo para evitar ser una rana y seguir de manera constante.

Primero, debe distinguir entre el componente contenedor y el componente de presentación

# Componente de contenedor

Manejará la conexión de datos entre la tienda y su hijo.

No tendrá su propia presentación, solo contiene otros componentes de presentación

Goodpoint: separación lógica de datos para, y permite que el componente de presentación tenga más posibilidades de ser reutilizado.

# Componente de presentación

Solo representará los datos que se le pasen. Se puede reutilizar fácilmente en otro lugar.

Segundo, lidiar con cada uno de ellos.

# Manejo del componente contenedor

  1. De acuerdo con los requisitos, piense en todas las acciones posibles y piezas de información necesarias para el componente.
  2. Defina los datos de entrada del componente contenedor.
  3. Defina el nombre de las acciones como constante.
  4. Crear acción con datos de objeto de asociación (cómo diseñar los datos de acción está fuera de discusión).
  5. Si hay necesidad de llamar a la API, necesitamos crear una saga. De lo contrario, omita crear Saga.
  6. Crear saga: crea un observador (observa la condición de acción del disparador) y un trabajador para manejar las llamadas a la API. Cree mutadores de datos para transformar los datos de respuesta en nuestra forma de deseo.
  7. Si no hay llamadas API (efectos secundarios), entonces podemos continuar con Reductores.
  8. Reductor: diseñe el estado inicial del reductor, defina la lógica para manejar los datos antes de aplicarlos al almacén principal.
  9. Defina los selectores para seleccionar la pieza de datos necesaria o las piezas de datos procesadas para los componentes, esto ayuda a almacenar en caché los datos del componente en caso de que lo necesitemos.
  10. Pase todos los datos necesarios a los accesorios del componente contenedor a través del método connect de redux, connect, "bindActionCreators", ...
  11. Procese el componente Presentación dentro del componente contenedor si es necesario.

# Tratar con el componente de presentación

  1. De acuerdo con el requisito, defina los datos necesarios para representar este componente.
  2. Reciba los accesorios del componente principal o del componente contenedor.

No prometo que esto eliminará por completo su dolor, pero al menos ayuda a reducir la cantidad de tiempo para saltar.

Gracias por leer.