React-Redux中<provider>和connect()之间的关系是什么?

时间:2017-01-16 23:30:05

标签: reactjs redux react-redux

我是Redux的新手,我试图找出<Provider>connect()之间的关系。

据我了解,connect 将您的组件连接到商店。但是,在函数参数中没有任何地方告诉connect该商店到底在哪里!

如果我没有弄错的话,connect()会自动将商店提供给<Provider>。这对我来说似乎非常违反直觉,因为Redux的entire point是透明的。

所以我的问题是,<Provider>如何在不使用某种全局变量的情况下将商店传递给connect()?它是否遍历整个树,搜索connect ed组件然后自己注入?这不是效率低下的吗?如果是这样,我将如何在同一组件树中使用两个不同的商店?

其次,假设我不想使用<Provider>,如果没有它,我怎么能使用connect()?即,我如何明确地将商店传递给每个连接的组件?

2 个答案:

答案 0 :(得分:6)

<Provider>connectreact-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相当不错,并提供了有关Providerconnect()

的一些信息
  

我们建议的选项是使用特殊的React Redux组件   叫<Provider>以神奇地使商店可供所有人使用   应用程序中的容器组件,而不显式传递它。   渲染根组件时只需使用一次

从本质上讲,它利用来自Reactcontext。根据文档,这允许您通过组件树传递数据,而无需在每个级别手动传递道具。

没有理由不能明确地通过商店。这里的想法是它让事情变得更容易。