使用继电器更新React状态

Updating React state with Relay

本文关键字：React 状态 更新 继电器      更新时间：2023-09-26

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

class TodoApp extends React.Component {
  ...
}

然后组件被包裹在中继容器中：

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

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

这与像Redux这样的流量实现不兼容（或者看起来不兼容）。Redux有一个全局状态对象，它也有更高阶的组件，这些组件将道具传递给表示组件。因此，我看不出Redux存储和中继容器目前是如何共存的。

那么，我们应该如何更新非来自数据库的状态呢？中继应该如何管理这种状态？

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

class TodoApp extends React.Component {
  // ...
}
TodoApp = connect(
  // ...
)(TodoApp);
TodoApp = Relay.createContainer(TodoApp, {
  // ...
});
export default TodoApp;

我不确定这有多大意义，但它很容易实现。

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

您可以在这里加入讨论

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

  1. 聊天组件（ChatComponent）是一个愚蠢的react组件，它期望所有数据都作为道具。它还需要redux dispatch函数作为道具，这样当有人想要发送新消息时，它就可以调度操作。这是一个"私有"组件，由包装
  2. ChatComponentRelay-它呈现ChatComponent，但它是一个Relay组件，也连接到redux存储。它使用一种生命周期方法（而不是构造函数）将通过中继接收的数据调度到redux存储中。这是应用程序其余部分使用的组件，基本上只是底层哑ChatComponent的代理。它呈现了ChatComponent从redux存储传入其道具中的所有数据，以及redux dispatch函数
相关文章：