¿Cómo utilizar useReducer en subcomponentes sin renderizar adicionalmente?
Tengo una aplicación de panel de control que procesa flujos de datos y acciones de usuario a través de useReducer y immer para actualizar el estado. Estas actualizaciones están disponibles cuando React está listo para renderizar.
Me gustaría invitar a otros a crear sus propios widgets para mi aplicación. Estos widgets serían impulsados por el estado derivado del reductor del panel de control.
Algunos widgets complejos podrían querer también usar useReducer localmente. Podrían tener sus propios flujos de datos y entradas locales. Aquí radica un problema de diseño: ¡los widgets que usan useReducer estarán un renderizado por detrás del resto del panel de control!
En mi entendimiento, esto se debe a que la salida del useReducer del panel de control solo está disponible justo antes de un renderizado, lo que significa que los widgets impulsados por estos datos que quieren usar useReducer localmente deben actualizarse a través de useEffect y esperar otro renderizado para dibujar su estado.
Soluciones posibles:
-
“elevar el estado” al panel de control, pero esto rompe una separación limpia de intereses: el estado de un widget no es relevante para los demás widgets. Hacer esto dificultará el mantenimiento y será engorroso.
-
usar
useMemoen los widgets para manejar y procesar datos antes de hacer el renderizado. Para asegurar que el estado no se pierda, también podría hacer queuseMemoactualice y devuelva un valor generado inicialmente poruseRef. Esto parece… como un anti-patrón.
davy.ai
Como experto en tecnología de la información especializado en JavaScript, ReactJS, React Hooks e immer.js, sugeriría la siguiente solución para resolver el problema de diseño de los widgets que utilizan useReducer y se encuentran un renderizado detrás del resto del tablero:
Al pasar la función dispatch, podemos asegurarnos de que cualquier actualización al estado global realizada por los widgets esté disponible antes del siguiente ciclo de renderizado. Esto permitirá que los widgets se mantengan sincronizados con el resto del tablero y aprovechen las últimas actualizaciones del estado.
En general, este enfoque garantizará que mantengamos una separación clara de intereses y evitemos cualquier anti-patrón. Al permitir que cada widget solo actualice el estado que necesita, podemos mantener los esfuerzos de mantenimiento al mínimo y mantener el código limpio y fácil de trabajar.