在表单提交时重置/重新启动 Rxjs 流

Question

我有一个输入字段，在提交时会进行 http 调用，然后绘制图表。当我单击图形的任何节点时，会进行相同的 http 调用，并将结果附加到先前的结果并更新图形。到这里为止一切正常。我正在使用扫描运算符来更新我的结果集。现在，我想要的是在我提交输入表单时重置结果集（即返回新的原始响应）并在单击图形节点时附加到结果集。关于如何实现这一点的任何想法？主要是如何在表单提交时重置此流？或者如何在表单提交上显示新数据并在节点点击上显示更新数据

Here linkingDetailsByAccount$ makes the http call and gets the data from the server.
this.linkingDetailsByAccountSubject.next(account);

在节点点击和表单提交时调用相同的代码，然后激活我的流。

graph$ = this.linkingDetailsByAccount$.pipe(
pluck('graph'),
scan((linkedDetails, adjacency) => {
  const { nodes: linkedNodes = [], edges: linkedEdges = [] } = linkedDetails;
  const { nodes: newNodes = [], edges: newEdges = [] } = adjacency;


  const updatedNodes = differenceBy(newNodes, linkedNodes, 'id');
  const updatedEdges = differenceWith(
    newEdges,
    linkedEdges,
    (newEdge: VisEdge, existingEdge: VisEdge) => newEdge.from === existingEdge.to
  );
  const allNodes = [...linkedNodes, ...updatedNodes];
  const allEdges = [...linkedEdges, ...updatedEdges];

  return {
    nodes: allNodes,
    edges: allEdges
  };
}, {} as NodesEdges)
);

感谢您对此的任何意见。

谢谢，

瓦特萨尔

Answer 1

编辑：当我从 OP 收到更多详细信息时更新了答案。

我会怎么做，就是把它变成一个类似于状态管理器的迷你 Redux。

所以scan 运算符应该接受函数或事件对象。

首先，您要存储您进行的初始 HTTP 调用的第一个初始状态。您将使用此对象在表单提交时重置您的状态。

然后创建一个graphEvents主题。

interface UpdateGraphEvent {
  type: 'Update';
  account: any;
}

interface ResetGraphEvent {
  type: 'Reset';
  account: any;
}

type GraphEvent = UpdateGraphEvent | ResetGraphEvent;

this.graphEvents$ = new Subject<GraphEvent>();

然后您可以使用新的 graphEvents$ 主题来替换 linkingDetailsByAccountSubject 的使用。

// When you want to update with new data.
this.graphEvent$.next({type: 'Update', account: account});

// when you want to reset with initial data.
this.graphEvent$.next({type: 'Reset', account: this.initialAccount});

然后在您的信息流中使用它。

graph$ = this.graphEvent$.pipe(
pluck('graph'),
scan((linkedDetails, event: GraphEvent) => {
  if (event.type === 'Reset') {
    return {
      nodes: event.account.nodes,
      edges: event.account.edges,
    }
  }

  const { nodes: linkedNodes = [], edges: linkedEdges = [] } = linkedDetails;
  const { nodes: newNodes = [], edges: newEdges = [] } = event.account;


  const updatedNodes = differenceBy(newNodes, linkedNodes, 'id');
  const updatedEdges = differenceWith(
    newEdges,
    linkedEdges,
    (newEdge: VisEdge, existingEdge: VisEdge) => newEdge.from === existingEdge.to
  );
  const allNodes = [...linkedNodes, ...updatedNodes];
  const allEdges = [...linkedEdges, ...updatedEdges];

  return {
    nodes: allNodes,
    edges: allEdges
  };
}, {} as NodesEdges)
);

graphEvent$ 将是一个发出这些事件 (GraphEvent) 的主题。