Soy nuevo en Redux y estoy tratando de descubrir la relación entre <Provider> y connect() .
Según tengo entendido, connect conecta su componente a la tienda. Sin embargo, en ninguna parte de los argumentos de la función le dices a connect dónde está exactamente esa tienda.
Si no me equivoco, el <Provider> proporciona automáticamente la tienda para connect() . Esto me parece muy contrario a la intuición, porque el objetivo de Redux es ser transparente.
Entonces mi pregunta es, ¿cómo <Provider> pasa la tienda a connect() sin usar algún tipo de variable global? ¿Atraviesa todo el árbol en busca de componentes connect y luego se inyecta a sí mismo? ¿No es eso ineficiente? Y si es así, ¿cómo usaría dos tiendas diferentes dentro del mismo árbol de componentes?
En segundo lugar, suponiendo que no quiero usar <Provider> , ¿cómo puedo usar connect() sin él? es decir, ¿cómo puedo pasar explícitamente una tienda a cada componente conectado?
<Provider> y connect son parte del módulo react-redux . Trabajan juntos, realmente no deberías usar uno sin el otro. Puede usar redux por sí solo sin react-redux , pero probablemente terminará recreando algunas o todas las funciones que proporciona react-redux .
react-redux funciona usando el contexto React . El contexto es como una capa oculta para pasar variables compartidas por múltiples componentes sin pasarlas explícitamente. Para usar el contexto, debe establecer el contexto en algún lugar, pero también, cualquier componente que quiera usar algo del context debe obtener la variable. En react-redux <Provider> esencialmente guarda la tienda en el context y la connect proporciona una forma de obtener la tienda del context .
Si aún no lo ha hecho, le recomiendo estos videos para comenzar con Redux y react-redux del creador de Redux.
Los documentos de redux son bastante buenos y tienen información sobre Provider y connect()
La opción que recomendamos es usar un componente especial de React Redux llamado
<Provider>para hacer que la tienda esté disponible mágicamente para todos los componentes del contenedor en la aplicación sin pasarlo explícitamente. Solo necesita usarlo una vez cuando renderiza el componente raíz
Esencialmente, aprovecha el uso del context que es de React . Según los documentos, esto le permite pasar datos a través del árbol de componentes sin tener que pasar los accesorios manualmente en cada nivel.
No hay ninguna razón por la que no puedas pasar explícitamente la tienda. La idea aquí es que simplemente hace las cosas más fáciles.