并非所有组件都看到相同的状态序列？

Question

请参阅示例代码： https://codesandbox.io/s/G5A04RB23

状态很简单，只包含一个value。 Sub和App都与redux相关联。单击调度按钮时，value递增。当值达到App时，componentWillReceiveProps会清除3中的状态。

但是从控制台日志中，Sub似乎永远不会看到3状态。

VM220:80 action VM220:21 reducer VM220:83 dispatch: 0.525146484375ms VM220:52 app prop 1 VM220:58 app render 1 VM220:32 sub prop 1 VM220:35 sub render 1 VM220:80 action VM220:21 reducer VM220:83 dispatch: 0.485107421875ms VM220:52 app prop 2 VM220:58 app render 2 VM220:32 sub prop 2 VM220:35 sub render 2 VM220:80 action VM220:21 reducer VM220:83 dispatch: 0.4931640625ms VM220:52 app prop 3 <<< app see 3 VM220:58 app render 3
VM220:32 sub prop 0 <<< sub never see 3 VM220:35 sub render 0 VM220:52 app prop 0 VM220:58 app render 0

我认为使用redux，状态应该与所有组件保持一致，并且每个组件应始终看到相同的状态。这是预期的行为还是我在这里做错了什么？

EDIT1

还尝试使用raw redux（而不是react-redux）：https://codesandbox.io/s/Jq6gBoGzK

这次我们确实看到app和sub都看到州value=3

所以它似乎是react-redux行为。但这对我来说有点令人惊讶，我仍然期望所有组件看到每个状态的变化（因此支持改变）。请参阅下面的图表：

期望值：

state1 -> (update props of comp1 ... compN) -> state2

实际值：

state1 -> (update props of comp1) -> state2 -> (update props of comp2)

为什么react-redux会这样做而不是我的期待？

sub listener 1 app listener 1 sub listener 2 app listener 2 sub listener 3 app listener 3 sub listener 0 app listener 0

Answer 1

以下是您在渲染应用时幕后发生的事情：

1. 从Redux获取App组件
的道具
2. 使用步骤＃1
中的道具调用App::componentWillReceiveProps()
3. 使用步骤＃1
中的道具调用App::render()
4. App::render()告诉React呈现Sub组件
5. 从Redux获取Sub组件
的道具
6. 使用步骤＃5中的道具呼叫Sub::componentWillReceiveProps()
7. 使用步骤＃5中的道具呼叫Sub::render()

当您在clearAction()中调度App::componetWillReceiveProps()事件时（在步骤＃2和＃3之间），Redux立即将商店中的value属性从3更改为{ {1}}，所以当你进入第5步时，Redux商店包含0，这就是value=0组件看起来永远不会看到Sub的原因。

您可以通过调整代码并在超时后调用value=3来看到这一点：

store.dispatch(clearAction());

通过该更改，您应该看到if (nextProps.value == 3) { setTimeout(function() { store.dispatch(clearAction()); }, 1000); // dispatch the clearAction() after one second } 呈现一直到value=3组件，然后在Sub点击后自动更改为value=0 } event被调度。