Ir al contenido principal

Configuración de la tienda

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Preguntas frecuentes de Redux: Configuración de la tienda​

¿Puedo o debería crear múltiples tiendas? ¿Puedo importar mi tienda directamente y usarla en los componentes?​

El patrón Flux original describe tener múltiples "tiendas" en una aplicación, cada una conteniendo un área diferente de datos de dominio. Esto puede introducir problemas como necesitar que una tienda waitFor a que otra se actualice. Esto no es necesario en Redux porque la separación entre dominios de datos ya se logra dividiendo un único reducer en reductores más pequeños.

Como con varias otras preguntas, es posible crear múltiples tiendas Redux distintas en una página, pero el patrón diseñado es tener solo una única tienda. Tener una única tienda permite usar Redux DevTools, simplifica la persistencia y rehidratación de datos, y facilita la lógica de suscripción.

Algunas razones válidas para usar múltiples tiendas en Redux podrían incluir:

  • Resolver problemas de rendimiento causados por actualizaciones demasiado frecuentes de alguna parte del estado, cuando se confirma mediante perfilado de la aplicación.

  • Aislar una aplicación Redux como componente en una aplicación más grande, caso en el que podrías querer crear una tienda por cada instancia de componente raíz.

Sin embargo, crear nuevas tiendas no debería ser tu primer instinto, especialmente si vienes de un entorno Flux. Primero prueba con composición de reductores y solo usa múltiples tiendas si eso no resuelve tu problema.

De manera similar, aunque puedes referenciar tu instancia de tienda importándola directamente, este no es un patrón recomendado en Redux. Si creas una instancia de tienda y la exportas desde un módulo, se convertirá en un singleton. Esto significa que será más difícil aislar una aplicación Redux como componente de una aplicación más grande si fuera necesario, o habilitar renderizado en servidor, porque en el servidor querrás crear instancias de tienda separadas para cada solicitud.

Con React Redux, las clases wrapper generadas por la función connect() sí buscan props.store si existe, pero lo mejor es que envuelvas tu componente raíz en <Provider store={store}> y dejes que React Redux se encargue de pasar la tienda hacia abajo. Así los componentes no necesitan preocuparse por importar un módulo de tienda, y aislar una aplicación Redux o habilitar renderizado en servidor será mucho más fácil de hacer después.

Más información​

Documentación

Debates

¿Es aceptable tener más de una cadena de middleware en mi potenciador de tienda? ¿Cuál es la diferencia entre next y dispatch en una función middleware?​

Los middleware de Redux actúan como una lista enlazada. Cada función middleware puede llamar a next(action) para pasar una acción al siguiente middleware en la cadena, llamar a dispatch(action) para reiniciar el procesamiento desde el principio de la lista, o no hacer nada para detener el procesamiento de la acción.

Esta cadena de middleware se define mediante los argumentos pasados a la función applyMiddleware usada al crear una tienda. Definir múltiples cadenas no funcionará correctamente, ya que tendrían referencias dispatch claramente diferentes y las distintas cadenas estarían efectivamente desconectadas.

Más información​

Documentación

Debates

¿Cómo me suscribo solo a una parte del estado? ¿Puedo obtener la acción despachada como parte de la suscripción?​

Redux proporciona un único método store.subscribe para notificar a los listeners que el store se ha actualizado. Los callbacks de los listeners no reciben el estado actual como argumento; es simplemente una indicación de que algo ha cambiado. La lógica del suscriptor puede entonces llamar a getState() para obtener el valor del estado actual.

Esta API está diseñada como una primitiva de bajo nivel sin dependencias ni complicaciones, y puede usarse para construir lógicas de suscripción de alto nivel. Las vinculaciones de UI como React Redux pueden crear una suscripción para cada componente conectado. También es posible escribir funciones que comparen inteligentemente el estado anterior con el nuevo, y ejecuten lógica adicional si ciertas partes han cambiado. Ejemplos incluyen redux-watch, redux-subscribe y redux-subscriber que ofrecen diferentes enfoques para especificar suscripciones y manejar cambios.

El nuevo estado no se pasa a los listeners para simplificar la implementación de mejoras del store como Redux DevTools. Además, los suscriptores están diseñados para reaccionar al valor del estado en sí, no a la acción. Se puede usar middleware si la acción es importante y necesita manejarse específicamente.

Más información​

Documentación

Debates

Bibliotecas