我感兴趣的是,当与Redux一起使用时,ReactJS组件如何相互交互?
从我在todoApp tutorial中看到的,我创建了一个图表,我如何理解这种交互(这可能是完全错误的,这就是我问这个问题的原因):
在此图中,可以看到五个基本实体: Provider
, Store
, Container
, MainComponent
和 Component
.
为简单起见,让我们调用所有这个系统 an application ,事实上,它由一个复合组件 MainComponent
及其子组成 .
Provider
是一个组件,封装了 Store
和 Container
个实例 .
Container
是 MainComponent
的增强版本,由Redux' dispatch()
函数提供支持,并包含来自 Store
实例的 currentState
的已定义(已过滤)数据 .
Store
只是 currentState
的持有者,即实际应用程序的状态 .
如前所述, MainComponent
是应用程序的中心组件,由 Component
实例(可选)组成 .
现在,此图上有四个Redux函数,即 connect
, selector
, reducer
和 dispatch
.
selector
过滤 state
,提供 MainComponent
所需的数据并丢弃其他所有数据 .
connect
接受 selector
函数和 MainComponent
类,并提供新的 Container
类,然后在 Provider
组件中使用该类用数据填充 MainComponent
.
reducer
获取当前应用程序的状态和调度操作(其目的是更改当前状态)并提供新的,已更改的应用程序状态 .
dispatch
是功能,将所有以前的功能连接在一起 . 这一"changes"状态 MainComponent
. 需要 action
,然后按当前应用程序状态命中 Store
. 获取的状态和操作将传递给 reducer
函数,该函数提供新的应用程序状态 . 这个新状态在 Store
中存储为 currentState
,然后传递给 selector
函数,该函数过滤状态,仅采用 MainComponent
所需的内容,然后为 MainComponent
更新 props
并使其重新呈现 .
那么简化的数据流/交互图是否正确?或者我有一些根本的误解?
谢谢!