给定订户的Redux-Logic订阅取消

Question

我正在尝试用Redux-Logic中间件实现订阅。这个想法如下：当从服务器获取数据时，以调用每个订户的回调作为参数。

// logic/subscriptions.js
const fetchLatestLogic = createLogic({
  type: FETCH_LATEST_DATA,
  latest: true,
  process({getState, action}, dispatch, done) {
    const {seriesType, nextUpdateTime} = action.payload;
    const callbacks = getState()[seriesType][nextUpdateTime].callbacks
    apiFetch(seriesType)
      .then(data => {
        callbacks.forEach(callback => callback(seriesType, data));
           done()
        })
  }
})
const subscribeLogic = createLogic({
  type: SUBSCRIPTIONS_SUBSCRIBE,
  cancelType: SUBSCRIPTIONS_REMOVE,
  process({getState, action, cancelled$}, dispatch) {
    const {seriesType, nextUpdateTime, updateInterval, subscriberId, callback} = action.payload;
    const interval = setInterval(() => {
      dispatch(fetchLatestData(seriesType, nextUpdateTime))
    }, updateInterval);
    cancelled$.subscribe(() => {
        clearInterval(interval)
    })
 }
})

---

// reducers/subscriptions.js
import update from 'immutability-helper';
update.extend('$autoArray', (value, object) => (object ? update(object, value) : update([], value)));
const initialState = {
  'SERIESTYPE1': {}
  'SERIESTYPE2': {}
}
// state modifications using 'immutable-helpers'
const serieAddSubscriberForTime = (seriesSubscriptions, time, subscriber) =>
  update(seriesSubscriptions, {
    [time]: {
      $autoArray: {
        $push: [subscriber]
      }
    }
});
// state modifications using 'immutable-helpers'
const serieRemoveSubscriberForTime = (seriesSubscriptions, subscriptionTime, subscriber) => {
  const subscriptions = seriesSubscriptions[subscriptionTime].filter(s => s.subscriberId !== subscriber.subscriberId);
  if (subscriptions.length === 0) {
    return update(seriesSubscriptions, { $unset: [subscriptionTime] });
  }
  return { ...seriesSubscriptions, ...{ [subscriptionTime]: subscriptions } 
};  
export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SUBSCRIPTIONS_SUBSCRIBE: {
        const { seriesType, nextUpdateTime, subscriber} = action.payload;
        const newSubscriptionAdded = serieAddSubscriberForTime(state[seriesType], nextUpdateTime, subscriber);
        const oldSubscriptionRemoved = serieRemoveSubscriberForTime(state[seriesType], nextUpdateTime, subscriber);
        return update(state, { [seriesType]: { ...oldSubscriptionRemoved, ...newSubscriptionAdded } });
    }
    default:
      return state;
  }
}

如何仅针对给定订户取消运行间隔？*(无需派遣间隔以减少并将其保存在状态下吗？(

因为只需派遣动作

cancelType: SUBSCRIPTIONS_REMOVE

将通过我当前的实现来删除所有订阅的所有间隔。

Answer 1

更新：实际上有更多平滑的方法来进行取消逻辑。

cancelled$

是可观察的，RXJS .subscribe((接受三个函数作为参数：

[onNext] (Function): Function to invoke for each element in the observable sequence.
[onError] (Function): Function to invoke upon exceptional termination of the observable sequence.
[onCompleted] (Function): Function to invoke upon graceful termination of the observable sequence.

因此，onNext函数的参数是一个发出的值，并且由于在我们的情况下是SUBSCRIPTIONS_REMOVE操作，我们可以访问其有效负载并根据该有效载荷进行取消：

cancelled$.subscribe(cancellAction => {
  if (cancellAction.payload.subscriberId === subscriberId &&
      cancellAction.payload.seriesType === seriesType) {
     clearTimeout(runningTimeout);
  }
})