Rxjs 如何创建NGRX效果，该效果每5秒从状态获取一条记录（如果可用）？

我想使用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;
}

但是考虑一下这个场景：

• 当存储区中没有消息时，效果计时器在第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;
  }),
);

export const messagesReducer=createReducer(
初始状态，
on（UiActions.addStateMessage，（当前，操作）=>{
返回messagesAdapter.addOne（action.message，当前）；
}),
on（UiActions.removeStateMessage）（当前，操作）=>{
返回消息dapter.removeOne（action.id，当前）；
}),
打开（UiActions.takeNextMessage）（当前，操作）=>{
//删除当前消息
if（当前.currentMessageId）{
current=messagesAdapter.removeOne（current.currentMessageId，current）；
}
//获取下一个消息id
const nextId=current.ids[0]作为字符串；
current.currentMessageId=nextId；
回流；
}),
);

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

takeMessageInterval$=createEffect(
（）=>此.actions$.pipe(
//添加消息时拦截
类型（UiActions.addStateMessage），
concatMapTo（//将消息排队
计时器（5000）.管道（//显示5秒
endWith（UiActions.takeNextMessage（））//显示下一条消息并删除当前消息
)
)
)
);

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

takeMessageInterval$=createEffect(
（）=>此.actions$.pipe(
//添加消息时拦截
类型（UiActions.addStateMessage），
concatMapTo（//将消息排队
计时器（5000）.管道（//显示5秒
endWith（UiActions.takeNextMessage（））//显示下一条消息并删除当前消息
)
)
)
);

谢谢您的回答，但如果将多条消息一起添加到队列中，则无法按预期工作，只会显示最后一条消息，我希望它将消息排队并逐个接收。其中每一条都有5秒钟，您是否可以详细说明“添加多条消息”？例如，考虑这些事件：在第二个消息中添加了一个消息，在第二个消息中添加了B和C -没有消息3分钟-消息D在3分钟添加了-----我希望每个消息A和B和C显示5秒，然后等待最后的消息传递，但是如果多个消息被添加到队列中，它不会如预期那样工作。总之，只显示最后一条消息，我希望它对消息进行排队并逐个接收它们。每一个5秒钟你都要详细说明“多信息被添加”吗？例如，考虑这些事件：在第二个1中添加一个消息-B和C在第二个2添加-没有消息3分钟-消息D在3分钟添加-----我希望每个消息A和B和C显示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;
  }),
);