angular - 效果不触发任何动作?
问题描述
我对 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(),
});
})
);
}
}
计数.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;
}
};
计数.action.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;
计数.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());
}
}
解决方案
您必须注册您的效果,请参阅文档https://ngrx.io/guide/effects#registering-root-effects。
如果这不能解决它,请提供一个复制品。
编辑:
您必须将效果添加到效果模块:
EffectsModule.forRoot([AppEffects]),
推荐阅读
- mysql - Sequelize Create 或 FindOrCreate 从不创建新记录,只更新以前的记录
- vba - 有没有办法在PowerPoint中拥有可移动的受保护元素?
- javascript - 用 FormData 开玩笑地测试请求(没有模拟)
- canvas - HTML5 Canvas:绝对缩放其内容
- javascript - 为什么没有出现矢量图标?
- excel - 特定工作表处于活动状态时无法运行宏
- html - 电子邮件的 HTML/CSS 时间线 (gmail...)
- c# - 如何使用 UWP 以编程方式连接两个图像
- javascript - 如何在嵌入对象中查找项目的位置
- reactjs - 让 CSSTransition 对工作类名称做出反应并没有改变