Angular 不触发任何动作的效果?
我是NGRx的新手,我正在尝试在我的小项目上使用效果,因为date使用了外部数据,我决定将其放入效果中,所以控制台不会显示任何错误,程序会看到除效果中使用的动作之外的所有动作(CountUpdatedAction),我使用的是redux devtools,当我更新计数时,不会触发updatedAt操作,所有其他操作都按预期工作 count.effects.ts count.ts count.actions.ts count.components.tsAngular 不触发任何动作的效果?,angular,typescript,redux,rxjs,ngrx,Angular,Typescript,Redux,Rxjs,Ngrx,我是NGRx的新手,我正在尝试在我的小项目上使用效果,因为date使用了外部数据,我决定将其放入效果中,所以控制台不会显示任何错误,程序会看到除效果中使用的动作之外的所有动作(CountUpdatedAction),我使用的是redux devtools,当我更新计数时,不会触发updatedAt操作,所有其他操作都按预期工作 count.effects.ts count.ts count.actions.ts count.components.ts 从'@angular/core'导入{Com
从'@angular/core'导入{Component};
导入{Store,从'@ngrx/Store'中选择};
从“./reducers/count/count.reducer”导入{ICountState};
从“rxjs”导入{Observable};
从“rxjs/operators”导入{map};
从“./reducers/count/count.selectors”导入{selectCount,selectUpdatedAt};
进口{
CountIncreaseAction,
采取行动,
CountClearAction,
}来自“./reducers/count/count.actions”;
@组成部分({
选择器:'应用程序根',
templateUrl:“./app.component.html”,
样式URL:['./app.component.scss'],
})
导出类AppComponent{
public count$:Observable=this.store$.pipe(select(selectCount));
public isButtonDisabled$:Observable=this.count$.pipe(
map((count)=>count您必须注册您的效果,请参阅文档
如果这不能解决问题,请提供复制品
编辑:
您必须将效果添加到“效果”模块:
EffectsModule.forRoot([AppEffects]),
EffectsModule.forRoot([])它在app.module.ts中,我修改为EffectsModule.forRoot([AppEffects]),现在应用程序崩溃了,没有任何功能!应该这样做还是这样做?请帮助我!我已经添加了现在应用程序崩溃了,不能做任何事情现在是无限循环
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;
}
};
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;
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());
}
}
EffectsModule.forRoot([AppEffects]),