我是Redux的新手,我试图找出<Provider>
和connect()
之间的关系。
据我了解,connect
将您的组件连接到商店。但是,在函数参数中没有任何地方告诉connect
该商店到底在哪里!
如果我没有弄错的话,connect()
会自动将商店提供给<Provider>
。这对我来说似乎非常违反直觉,因为Redux的entire point是透明的。
所以我的问题是,<Provider>
如何在不使用某种全局变量的情况下将商店传递给connect()
?它是否遍历整个树,搜索connect
ed组件然后自己注入?这不是效率低下的吗?如果是这样,我将如何在同一组件树中使用两个不同的商店?
其次,假设我不想使用<Provider>
,如果没有它,我怎么能使用connect()
?即,我如何明确地将商店传递给每个连接的组件?
答案 0 :(得分:6)
<Provider>
和connect
是react-redux
模块的一部分。他们一起工作,你不应该在没有另一个的情况下真正使用它们。您可以独立使用redux
而不react-redux
,但您可能最终会重新创建react-redux
提供的部分或全部功能
react-redux
使用React context。上下文就像一个隐藏层,用于传递由多个组件共享的变量,而不显式传递它们。要使用上下文,您需要在某处设置上下文,但是,任何想要使用context
中的内容的组件都需要获取变量。在react-redux
<Provider>
基本上将商店保存到context
,而connect
提供了从context
获取商店的方法。
如果您还没有,我recommend these videos开始使用Redux和react-redux
来自Redux的创建者。
答案 1 :(得分:4)
redux docs相当不错,并提供了有关Provider
和connect()
我们建议的选项是使用特殊的React Redux组件 叫
<Provider>
以神奇地使商店可供所有人使用 应用程序中的容器组件,而不显式传递它。 渲染根组件时只需使用一次
从本质上讲,它利用来自React的context
。根据文档,这允许您通过组件树传递数据,而无需在每个级别手动传递道具。
没有理由不能明确地通过商店。这里的想法是它让事情变得更容易。