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

【问题标题】：Level of Components listening to same redux state监听相同 redux 状态的组件级别
【发布时间】：2017-02-28 16:54:07
【问题描述】：

我的情况如下：

我的 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 个组件在同一位置侦听同一状态的文档。

希望有人可以帮助我了解发生了什么

【问题讨论】：

标签： javascript reactjs redux react-redux apollostack

【解决方案1】：

通常这不应该是一个问题。那么问题可能是由您的代码引起的？（只是一个没有看到任何实际代码的疯狂猜测！）

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

【讨论】：

我想我遇到了问题：返回的查询给出了错误，因为初始状态是一个空字符串，这应该不是问题，因为当我的状态更改时查询将再次触发。但由于我没有明确检查错误（只是我的状态是否产生空字符串），我尝试访问 undefined 值（我所谓的结果）。这弄乱了内部状态，导致组件停止重新渲染。我不确定为什么组件的顺序很重要，但这就是我到目前为止所得到的。