我感兴趣的是,当与Redux一起使用时,ReactJS组件如何相互交互?

从我在todoApp tutorial中看到的,我创建了一个图表,我如何理解这种交互(这可能是完全错误的,这就是我问这个问题的原因):

my personal vision of how react + redux work

在此图中,可以看到五个基本实体: ProviderStoreContainerMainComponentComponent .

为简单起见,让我们调用所有这个系统 an application ,事实上,它由一个复合组件 MainComponent 及其子组成 .

Provider 是一个组件,封装了 StoreContainer 个实例 .

ContainerMainComponent 的增强版本,由Redux' dispatch() 函数提供支持,并包含来自 Store 实例的 currentState 的已定义(已过滤)数据 .

Store 只是 currentState 的持有者,即实际应用程序的状态 .

如前所述, MainComponent 是应用程序的中心组件,由 Component 实例(可选)组成 .


现在,此图上有四个Redux函数,即 connectselectorreducerdispatch .

selector 过滤 state ,提供 MainComponent 所需的数据并丢弃其他所有数据 .

connect 接受 selector 函数和 MainComponent 类,并提供新的 Container 类,然后在 Provider 组件中使用该类用数据填充 MainComponent .

reducer 获取当前应用程序的状态和调度操作(其目的是更改当前状态)并提供新的,已更改的应用程序状态 .

dispatch 是功能,将所有以前的功能连接在一起 . 这一"changes"状态 MainComponent . 需要 action ,然后按当前应用程序状态命中 Store . 获取的状态和操作将传递给 reducer 函数,该函数提供新的应用程序状态 . 这个新状态在 Store 中存储为 currentState ,然后传递给 selector 函数,该函数过滤状态,仅采用 MainComponent 所需的内容,然后为 MainComponent 更新 props 并使其重新呈现 .


那么简化的数据流/交互图是否正确?或者我有一些根本的误解?

谢谢!