NGRX在两个动作之间设置计时器

编程问答 2022-08-15

问题描述

我正在使用Angular和NGRX，我想在两个动作之间设置一个计时器，当第一个动作触发时，计时器应该启动，而第二个动作应该停止。我应该能够将计时器保存在全局变量中或处于我的状态，因为稍后我会将其发送到数据库。 以下是我想要实现的一个很好的例子，但是我不知道使用ngrx。 我的正在增加，所以它不是秒表。 https://stackblitz.com/edit/timer-with-pause?file=src%2Fapp%2Fapp.component.ts

州 

 export type MainContentState = 'empty' | IMainContent;
    
    export interface IMainContent {
        insert: boolean;
        modified: boolean;
        connectionOK: boolean;
        sessionDuration: any;
        interval: any;
    }

减速器 

  export function mainContentReducer(state: MainContentState = 'empty',action: MainReducerActions): MainContentState {
            let interval;
            let timer = 0;
            switch (action.type) {
              case START_SESSION_TIMER: {
                startSessionTimer(interval,timer);   
                // also tried this    startSessionTimer(state.interval,state.sessionDuration); 
                if (state === 'empty') {
                    return state;
                }
                return { ...state,sessionDuration: timer };
    
            }
              case STOP_SESSION_TIMER: {
                stopSessionTimer(interval,timer);
                // also tried this    stopSessionTimer(state.interval,state.sessionDuration);
                if (state === 'empty') {
                    return state;
                }
                return { ...state,sessionDuration: timer };
    
            }
                return state;
    }
 }



    function startSessionTimer(interval: any,timer: any) {
        debugger
         interval = setInterval(() => {
                timer++;
          },1000);
    
    }
    

    function stopSessionTimer( interval: any) {
        debugger
            clearInterval(interval);
        }

解决方法

除了设置减速器内部的状态外，您不应设置计时器或执行其他任何操作。

另一种方法是：

州

您所在州的2个属性=类型为sessionStartTime的{​​{1}}和sessionEndTime

操作

  • Date和SET_SESSION_START_TIME。两者都将SET_SESSION_END_TIME作为其有效负载，并通过化简器将相应的属性设置为状态。这些是从您分派现有等效操作的相同位置分派的。
  • Date和SAVE_SESSION_DURATION没有有效负载。当您要将持续时间保存到数据库时，将调度第一个调度，而当操作成功时，将调度第二个调度调度。

效果

一种将会话持续时间保存到数据库的效果：

SAVE_SESSION_DURATION_SUCCEEDED
angularangularngrxreduxreduxreduxreduxtimertimer