使用 Relay 更新 React 状态答案

【问题标题】：Updating React state with Relay使用 Relay 更新 React 状态
【发布时间】：2016-03-10 00:04:02
【问题描述】：

使用 Relay，您可以像往常一样创建一个 React 组件：

class TodoApp extends React.Component {
  ...
}

然后组件被封装在一个 Relay 容器中：

export default Relay.createContainer(TodoApp, {
  ...
});

Relay 容器将使用 GraphQL 获取数据，然后更新状态。这是一个高阶组件，然后这个状态作为道具传递给它的孩子。

这与 Redux 等通量实现不兼容（或似乎不兼容）。 Redux 有一个单一的全局状态对象，它也有更高阶的组件，可以将 props 传递给展示组件。所以我看不出 Redux 存储和 Relay 容器目前是如何共存的。

那么我们应该如何更新不是来自数据库的状态呢？这个状态应该如何用 Relay 来管理？

【问题讨论】：

标签： javascript reactjs redux relay graphql

【解决方案1】：

这些事情仍在讨论中，如果您使用 Relay 容器，Redux 和 Relay 的当前状态可能无法很好地结合在一起。

您可以加入讨论here

【讨论】：

【解决方案2】：

虽然我无法为您提供一起使用它们的建议，但从技术上讲，您绝对可以将几个高阶组件一个接一个地应用：

class TodoApp extends React.Component {
  // ...
}

TodoApp = connect(
  // ...
)(TodoApp);

TodoApp = Relay.createContainer(TodoApp, {
  // ...
});

export default TodoApp;

我不确定这是否有意义，但很容易做到。

【讨论】：

Relay 容器的级别要高于 Redux 容器，否则 Relay 无法正常传递碎片。

【解决方案3】：

我为聊天应用程序执行了如下操作：

聊天组件 (ChatComponent) 是一个愚蠢的反应组件，它期望所有数据都作为道具出现。它还需要 redux dispatch 函数作为道具，以便在有人想要发送新消息时调度操作。这是一个“私有”组件，由...包装。
ChatComponentRelay - 这会呈现ChatComponent，但它是一个 Relay 组件，它也连接到 redux 存储。它使用一种生命周期方法（不是构造函数）将通过中继接收到的数据分派到 redux 存储中。这是应用程序其余部分使用的组件，基本上只是底层哑ChatComponent 的代理。它渲染 ChatComponent 并从 redux 存储中传入其 props 中的所有数据，以及 redux dispatch 函数。

【讨论】：