监听相同redux状态的组件级别

Question

我的情况如下:

我有一个字段在我的redux状态，只不过是以下类型的对象:{String, [{String, Float}]}。我的状态中的这个字段由2个组件使用(它们使用String作为变量在GraphQL上进行查询)。

两个组件通过connect方法连接(使用装饰器语法)。

@connect((state) => ({variable: state.variable.field}))
@graphql(QUERY, {...})
export default class Component1 extends React.Component { ... }

@connect((state) => ({variable: state.variable.field}))
@graphql(QUERY, {...})
export default class Component2 extends React.Component { ... }

没有什么特别的，因为这适用于所有其他Component。然而，当我在同一级别上调用这些组件，同时在它们的render方法中记录状态时:

<div>
    <Component1 />
    <Component2 />
</div>

Component1按原样记录状态，Component2记录初始状态。当我在适当的位置切换组件时:

<div>
    <Component2 />
    <Component1 />
</div>

相反的情况发生了:Component2记录正确的状态，Component1没有。

当我调用彼此内部的任何一个组件时(其中Component1调用Component2作为其渲染的一部分)，一切都很好。

我不确定这里发生了什么，也找不到任何文档说明你不应该在同一位置调用侦听相同状态的两个组件。

希望有人能帮助我了解这是怎么回事

Answer 1

通常这不是问题。所以问题可能是由你的代码引起的?(只是一个大胆的猜测，没有看到任何实际的代码!)

但是我建议将connect提升到Redux到父组件中。特别是当两个组件都需要完全相同的状态部分时。