效果不触发任何动作？

Posted 2023-02-19

【中文标题】效果不触发任何动作？

【英文标题】：Effects not triggering any actions?

【发布时间】：2020-11-14 05:13:12

【问题描述】：

我对 NGRx 很陌生，我正在尝试在我的小项目上使用效果，因为日期使用外部数据我决定将它放在效果中，所以控制台没有显示任何错误，程序看到除了使用的动作之外的所有动作在效果（CountUpdatedAtAction）中，我使用的是 redux devtools，当我更新计数时没有触发 updatedAt 动作，所有其他动作都按预期工作

count.effects.ts

import  Injectable  from '@angular/core';
import  Actions, Effect, ofType  from '@ngrx/effects';
import 
  countActionsType,
  CountUpdatedAtAction,
 from './reducers/count/count.actions';
import  map  from 'rxjs/operators';

@Injectable()
export class AppEffects 
  constructor(private actions$: Actions) 

  @Effect()
  updatedAt$() 
    return this.actions$.pipe(
      ofType(
        countActionsType.increase,
        countActionsType.decrease,
        countActionsType.clear,
        countActionsType.updatedAt
      ),
      map(() => 
        return new CountUpdatedAtAction(
          updatedAt: Date.now(),
        );
      )
    );
  

count.reducer.ts

import  CountActions, countActionsType  from './count.actions';

export const COUNT_NODE = 'count';

export interface ICountState 
  count: number;
  updatedAt: number;


const initialState: ICountState = 
  count: 0,
  updatedAt: Date.now(),
;

export const countReducer = (state = initialState, actions: CountActions) => 
  switch (actions.type) 
    case countActionsType.increase:
      return 
        ...state,
        count: state.count + 1,
      ;
    case countActionsType.decrease:
      return 
        ...state,
        count: state.count - 1,
      ;
    case countActionsType.clear:
      return 
        ...state,
        count: 0,
      ;
    case countActionsType.updatedAt:
      return 
        ...state,
        updatedAt: actions.payload.updatedAt,
      ;
    default:
      return state;
  
;

count.actions.ts

import  Action  from '@ngrx/store';

export enum countActionsType 
  increase = '[COUNT] increase',
  decrease = '[COUNT] decrease',
  clear = '[COUNT] clear',
  updatedAt = '[COUNT] updated at',


export class CountIncreaseAction implements Action 
  readonly type = countActionsType.increase;


export class CountDecreaseAction implements Action 
  readonly type = countActionsType.decrease;


export class CountClearAction implements Action 
  readonly type = countActionsType.clear;


export class CountUpdatedAtAction implements Action 
  readonly type = countActionsType.updatedAt;

  constructor(
    public payload: 
      updatedAt: number;
    
  ) 


export type CountActions =
  | CountIncreaseAction
  | CountDecreaseAction
  | CountClearAction
  | CountUpdatedAtAction;

count.components.ts

import  Component  from '@angular/core';
import  Store, select  from '@ngrx/store';
import  ICountState  from './reducers/count/count.reducer';
import  Observable  from 'rxjs';
import  map  from 'rxjs/operators';
import  selectCount, selectUpdatedAt  from './reducers/count/count.selectors';
import 
  CountIncreaseAction,
  CountDecreaseAction,
  CountClearAction,
 from './reducers/count/count.actions';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
)
export class AppComponent 
  public count$: Observable<number> = this.store$.pipe(select(selectCount));
  public isButtonDisabled$: Observable<boolean> = this.count$.pipe(
    map((count) => count <= 0)
  );
  public updatedAt$: Observable<number> = this.store$.pipe(
    select(selectUpdatedAt)
  );

  constructor(private store$: Store<ICountState>) 

  increase() 
    this.store$.dispatch(new CountIncreaseAction());
  

  decrease() 
    this.store$.dispatch(new CountDecreaseAction());
  

  clear() 
    this.store$.dispatch(new CountClearAction());
  

【参考方案1】：

您必须注册您的效果，请参阅文档https://ngrx.io/guide/effects#registering-root-effects。

如果不能解决，请提供一个复制品。

编辑：

您必须将效果添加到效果模块：

    EffectsModule.forRoot([AppEffects]),

【讨论】：

EffectsModule.forRoot([]) 它在 app.module.ts 中，我修改为 EffectsModule.forRoot([AppEffects])，现在应用程序崩溃了，没有任何工作！应该这样还是？

link to GitHub Repo请帮帮我！

我现在添加了应用程序崩溃并且无法执行任何操作

现在是无限循环