订阅时进行ngrx轮询以刷新数据 [英] ngrx polling to refresh data when subscribed

问题描述

我在相关应用程序中使用了以下库:Angular 4.x，ngrx 4.x，rxjs 5.4.x

I am using the following libraries in the relevant application: Angular 4.x, ngrx 4.x, rxjs 5.4.x

在我的应用程序中，我能够从websocket中获取一些数据，但对于某些应用程序，我必须使用RESTful API.我正在通过ngrx在多个组件之间共享数据.现在，我根据创建，更新和删除等事件来重新获取数据.

In my application I am able to get some data from a websocket but for some I have to hit a RESTful api. I am sharing the data between multiple components through ngrx. Right now I refetch the data based on events like create, update, and delete.

我不希望对数据进行太多的并发修改，但是我确实需要一种手动或自动确保我的客户端状态与服务器匹配的方法.我想进行乐观更新，以修补客户端状态，而不要承担在相关状态片上进行完整数据刷新的费用.

I don't expect much concurrent modification of the data but I do need a way to manually or automatically ensure that my client state matches the server. I would like to do optimistic updates that patch the client state rather than incurring the cost of doing a full data refresh on the relevant slice of state.

如果我不使用ngrx，那么我可能只会得到一个公开了如下内容的可观察服务，该服务将缓存api调用的最新结果并与所有订阅共享.它将偶尔更新结果，但前提是要有订阅者.

If I wasn't using ngrx then I would probably just have a service that exposed an observable like the following that would cache the latest result of an api call and share it with all subscribes. It would update the result occasionally but only if it had subscribers.

const interval = 1000;
let counter = 0;

// setup a timer that executes immediately and on a timer
let call = Rx.Observable.timer(0, interval)
  // make the fake async call
  .switchMap(() => Rx.Observable.of(counter++).delay(100))
  .do(x => console.log('call', x))
  // cache latest value and share the value with all subscribers
  .publishReplay(1, interval)
  // only connect (aka make the call) if there are more than 1 subscribers
  .refCount();

// convenience method for simulation
function subscribe(name, take) {
  call.take(take).subscribe(
    x => { console.log(name, x); },
    null,
    () => { console.log(`${name} completed`) }
  );
}

// observers
subscribe('first', 1);
subscribe('second', 2);
window.setTimeout(() => {
  subscribe('third', 3);
}, 3500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

我不确定用ngrx模仿同样的行为，因为ngrx会处理对自身的订阅.它以许多方式使订阅与源断开连接.这是我考虑的一些想法:

I'm not sure how I would mimic this same behavior with ngrx since ngrx handles the subscriptions to itself. In many ways it disconnects the subscription from the source. Here are some ideas I've mulled over:

• 也许我可以躲开store.select，但是我认为我必须定义化简中已经定义的效果和状态之间的显式关系.
• 我可以让每个页面/组件注册它感兴趣的内容并以这种方式跟踪订阅，但这实际上只是复制订阅.
• 我可以为位于ngrx前面的每个状态切片设置投影，并以某种方式触发相关效果，但这似乎很棘手，而且可能令人费解.
• 放弃我的工作，卖宠物石头为生.

• Maybe there is a way that I could duck punch store.select but then I think that I would have to define explicit relationships between effects and state that are already defined in the reducers.
• I could have each page/component register what it is interested in and track subscriptions that way but that is really just duplicating the subscriptions.
• I could setup projections for each slice of state that would sit in front of ngrx and somehow trigger the related effect but that seems tricky and possibly convoluted.
• Quit my job and sell pet rocks for a living.

仅当相关数据片上存在有效订阅时，如何才能间隔提取数据以更新ngrx存储?

How can I pull data on an interval to update an ngrx store only when there are active subscriptions on the related slice of data?

推荐答案

我不认为我100％会发生什么.但是我想我会做这样的事情:

I don't think I understand what's going on 100%. But I think I would do something like this:

• 在我的商店中，有一些属性可以跟踪是否正在监视一条数据(布尔值)
• 在加载监视数据的组件时，调度将其值设置为true的事件
• 当组件不再存在时，使用ngOnDestroy将该值设置为false
• 具有ngrx效果，可以监视该值是否发生变化.如果该值更改为true，则开始从服务器获取数据，并在得到响应后，调度一个事件以更新存储中的数据，并以一定的时间间隔进行操作.将setInterval或timer的返回值保存在一个可以在其他位置访问的变量中，也许可以作为该类的属性来访问.
• 如果该值更改为false，则另一个ngrx效果正在监听该操作，它将获取包含计时器/时间间隔的变量，并将其清除/取消订阅.可能可以将它们与takeUntil一起组成

这篇关于订阅时进行ngrx轮询以刷新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！