Question

版本

"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^8.5.1",
"@ngrx/router-store": "^8.5.0",
"@ngrx/store": "^8.5.0",
"@ngrx/store-devtools": "^8.5.0",
"@angular/core": "~8.2.8"

我正在尝试侦听和更新我的组件之一中的状态。我不确定如何正确执行此操作。我尝试过

 this.ganttControls$ = this.store.select((state) => state.GanttControls);    

  //and

 this.ganttControls$ = this.store.pipe(
      select((state) => state.GanttControls)      
 );`

这是完整的实现。

动作

export const LOAD_GANTT_CONTROLS = "LOAD_GANTT_CONTROLS";
export const LOAD_GANTT_CONTROLS_SUCCESS = "LOAD_GANTT_CONTROLS_SUCCESS";

export class LoadGanttControlsAction{
    readonly type = LOAD_GANTT_CONTROLS;
    constructor(){}
}

export class LoadGanttControlsSuccessAction{
    readonly type = LOAD_GANTT_CONTROLS_SUCCESS;
    constructor(public payload: GanttControls){}
}

export type Action = LoadGanttControlsAction | LoadGanttControlsSuccessAction;

效果

export class GanttEffects{
    constructor(private actions$: Actions, private ganttService: GanttService){

    }

    @Effect() loadGanttControls$ = this.actions$.pipe(            
        ofType(ganttActions.LOAD_GANTT_CONTROLS),
        switchMap(() => this.ganttService.getGanttControls()

        ), 
        map((gControls) => (new ganttActions.LoadGanttControlsSuccessAction(gControls)))       
    );
}

状态

export class GanttState{

    GanttControls: GanttControls = {
        ProjectTree: [],
        TaskTypes: []    
    };
} 

export function getInitialState(){
    return GanttState;
}

减速器

export function ganttReducer(state, action: ganttActions.Action){

    switch(action.type){
        case ganttActions.LOAD_GANTT_CONTROLS_SUCCESS:{
            return action.payload; //this line of code is being returned as expected.
        }
        default:{
            return state;
        }
    }
}

获取数据的甘特服务

@Injectable()
export class GanttService{
    ganttControls: Observable<GanttControls>;

    constructor(private http: HttpService){        
    }

    public getGanttControls(): Observable<GanttControls>{        
        return this.http.get<GanttControls>('GanttFilter/GetGanttControls');
    }

}

我的组件中有

    private ganttControls$: Observable<GanttControls>;

    constructor(public dialog: MatDialog,
      private http: HttpService,
      private store: Store<GanttState>){

    }

       ngOnInit(){    
          this.ganttControls$ = this.store.pipe(
            select((state) => state.GanttControls)      
          );
        }

        public showFilter(){

          const dialogRef = this.dialog.open(GanttFilter, {
            data: {filterControls : this.ganttControls$,
                    projectTreeConfig: {
                      hasAllCheckBox: true,
                      hasFilter: true,
                      hasCollapseExpand: true,
                      decoupleChildFromParent: false,
                      maxHeight: 500
                   },
                    projectTreeData: []},
            minWidth: '25vw',
            maxWidth: '90vw',
            minHeight: '50vh',
            maxHeight: '90vh'
          });
        }

我选中this.ganttControls$时是undefined

两者都注册在我的app.module中

StoreModule.forRoot({ganttStore: ganttReducer}),
EffectsModule.forRoot([GanttEffects])

Answer 1

我认为这部分看起来不对：

export class GanttState{

    GanttControls: GanttControls = {
        ProjectTree: [],
        TaskTypes: []    
    };
} 

export function getInitialState(){
    return GanttState;
}

export function ganttReducer(state, action: ganttActions.Action){

状态通常是接口
您有一个getInitialState()，但是您在哪里叫它？
使用return GanttState您要返回课程吗？！

根据我的经验，它应该更像这样：

export interface GanttState {
    ganttControls: GanttControls;
}

export const initialState: GanttState ={
    ganttControls: {
        ProjectTree: [],
        TaskTypes: []    
    };
}  

export function ganttReducer(state: GanttState = initialState, action: ganttActions.Action){

Answer 2

这行代码的问题

this.ganttControls$ = this.store.select((state) => state.GanttControls);

是

state.GanttControls

我将减速器注册为

`StoreModule.forRoot({ganttStore: ganttReducer})`//I named it ganttStore

所以我将其更改为

this.store.select((state) => state.ganttStore);

rxjs如何侦听组件中的状态更改

2 个答案: