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

Question

我的情况如下：

我的 redux 状态中有 1 个字段，只不过是以下类型的对象：{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 作为渲染的一部分），一切都很好。

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

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

Answer 1

通常这应该不是问题。那么也许问题是由您的代码引起的？（只是胡乱猜测 w/o 看到任何实际代码！）

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

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

Level of Components listening to same redux state

javascript

reactjs

redux

react-redux

apollostack