使用中继环境的突变

Mutations using Relay Environment

我在 React Native 中使用 Relay,在登录和注销期间遇到问题。

登录或注销后,Relay 会保留前一个用户的存储。为了解决这个问题,我使用 Relay.RendererRelay.Environment。在每个 Renderer 中,我都放置了 Environment.

的单例对象

问题是我之前对 Relay.Store 的对象进行了修改,如 Relay.Store.commitUpdate(new CreateProfile(), callback).

现在不行了。我猜这是因为 Relay.Store 对服务器端点一无所知。但是 Relay.Environment 确实如此。

现在我正在使用这样的东西 this.props.relay.commitUpdate(new CreateProfile(), callback)。当父组件被包装为 Relay.Container 时它工作得很好,所以它在 props 中有中继对象。

但是我应该如何处理那些不是 Relay.Containers 并且在 props 中没有 Relay 对象的组件?

Relay.StoreRelay.Environment 的全局可访问单例实例,Relay.Store.commitUpdate() 更新该全局环境中的数据。但是,由于您使用的是自己的 Relay.Environment 实例,要更新它,您需要使用 this.props.relay.commitUpdate(),如您所述。这会更新容器的渲染环境。

如果需要从未包装在 Relay.Container 中的容器 的子组件进行更改,有两种方法可以做到这一点。您可以简单地将 relay 属性传递给它们,因此在容器的渲染函数中您将拥有:

<Child relay={this.props.relay} />

但是,由于那些普通组件不在 Relay 容器中,因此它们目前不需要了解 Relay 的任何信息。如果你想让它们保持这种状态,你可以像这样在容器组件中编写执行更新的方法:

onCreateProfile = () => {
  this.props.relay.commitUpdate(new CreateProfile());
};

并且仅将回调传递给 render 中的子组件:

<Child onCreateProfile={this.onCreateProfile} />

如果您需要从组件层次结构 中根本没有 Relay.Container 的组件进行更改,您可以创建 Relay.Environment 在更高层的共享根组件中并使用 props 将其向下传递(或使用上面显示的策略传递回调)。