1

我想使用 NGRX 创建一个消息队列，添加到队列中的每条消息都应显示 5 秒钟，然后从状态中删除，

  • 在队列中的最后一条消息超时后，应将 null 值分配给 currentMessageId
  • 消息应立即从队列中取出，如果currentMessageId == null

这是我的状态：

import { EntityState } from '@ngrx/entity';

export interface UiMessage {
  id: string;
  severity: 'info' | 'warn' | 'error' | 'success';
  summary?: string;
  detail: string;
}
export interface MessagesState extends EntityState<UiMessage>{
   currentMessageId: string;
}

我已经尝试过这段代码，如果商店里总是有一条消息，它会很好地工作：

  takeMessageInterval$ = createEffect(() => {
    return timer(0, 5000).pipe(
      map(() => {
        return UiActions.takeNextMessage()
      })
    )
  });

但考虑这种情况：

  • 效果计时器从第 0 秒开始，而商店中没有消息
  • 一条消息在第 1 秒添加到存储，然后消息必须等待 4 秒才能打勾，然后显示在视图中
    • 我希望它尽快显示并在 5 秒后删除

这里还有减速器功能：

export const messagesReducer = createReducer<MessagesState>(
  initialState,
  on(UiActions.addStateMessage, (current, action) => {
    return messagesAdapter.addOne(action.message, current);
  }),
  on(UiActions.removeStateMessage, (current, action) => {
    return messagesAdapter.removeOne(action.id, current);
  }),
  on(UiActions.takeNextMessage, (current, action) => {
    // remove current message
    if (current.currentMessageId) {
      current = messagesAdapter.removeOne(current.currentMessageId, current);
    }

    // take next message id
    const nextId = current.ids[0] as string;
    current.currentMessageId = nextId;

    return current;
  }),
);
4

1 回答 1

0

这可能是一种方法，假设一次只能显示一条消息：

takeMessageInterval$ = createEffect(
  () => this.actions$.pipe(
    // Intercept when a message has been added
    ofType(UiActions.addStateMessage),
    concatMapTo( // Queue up the messages
      timer(5000).pipe( // Display it for 5 seconds
        endWith(UiActions.takeNextMessage()) // Display the next message and remove the current one
      )
    )
  )
);
于 2020-04-02T17:16:56.797 回答