react-native – 使用中继环境的突变

2023年10月2日 248次阅读

我正在使用Relay与React Native并在登录时遇到问题&登出.

登录或注销后,Relay会将商店与之前的用户保持一致.为了解决这个问题,我使用了Relay.Renderer和Relay.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的组件中做什么,并且在道具中没有Relay对象？

最佳答案 Relay.Store是Relay.Environment的全局可访问单例实例,Relay.Store.commitUpdate()更新该全局环境中的数据.但是,由于您正在使用自己的Relay.Environment实例,要更新它,您需要使用this.props.relay.commitUpdate(),如您所述.这会更新容器呈现的环境.

如果需要从容器的子组件进行突变,而这些组件未包含在Relay.Container中,则有两种方法可以做到这一点.您可以简单地将继电器道具传递给它们,因此在容器的渲染功能中,您将拥有：

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

但是,由于这些普通组件不在Relay容器中,因此它们目前不需要了解有关Relay的任何信息.如果你想保持这种方式,你可以编写在容器组件中执行更新的方法,如下所示：

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

并且只在回放中将回调传递给子组件：

<Child onCreateProfile={this.onCreateProfile} />

如果你需要从组件层次结构中没有Relay.Container的组件进行变异,你可以在更高的共享根组件中创建Relay.Environment并使用props传递它(或传递使用上面显示的策略进行回调.

点赞