NgRx 无法从商店获取状态

如何解决NgRx 无法从商店获取状态

在我的应用程序中，我想选择值并重新渲染绘图类型取决于 selectedvalue，我试图从存储中获取状态并将状态值插入到组件中，但没有任何反应，在 redux 开发工具中我可以看到状态发生变化选择更改，但在我想使用它的组件中没有任何反应，有关信息，我无法在 VisualizationComponent 中获取状态，我做错了什么？

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import {changeType} from '../../../store/actions/actions';

@Component({
  selector: 'app-controls',templateUrl: './controls.component.html',styleUrls: ['./controls.component.css']
})
export class ControlsComponent {
  selectedOption: string;
  selectedToggle: string;
  title: string;
  minValue: number;
  maxValue: number;
   options = [
    {value: 'bar',viewValue: 'BarChart'},{value: 'bubble',viewValue: 'BubblePlot'},{value: 'box',viewValue: 'BoxPlot'},];

  constructor(private store: Store<ControlsComponent>) {

  }

  changeType(value) {
    this.store.dispatch(changeType({payload: value}));
  }

}

import {changeType} from '../actions/actions';
import {Action,createReducer,on} from '@ngrx/store';

export interface State {
  selectedOption: string;
  selectedToggle: string;
  title: string;
  minValue: number;
  maxValue: number;
}

export const initialState: State = {
  selectedOption: 'box',selectedToggle: '',title: '',minValue: 0,maxValue: 0,};


export const controlReducer = createReducer(
  initialState,on(changeType,(state,action) => ({
    ...state,selectedOption: action.payload
  }))
);

export function reducer(state: State | undefined,action: Action) {
  return controlReducer(state,action);
}

import {ActionReducerMap} from '@ngrx/store';
import * as  fromControlReducer from './controlReducer';


export interface State {
  control: fromControlReducer.State;
}

export const reducers: ActionReducerMap<State> = {
  control: fromControlReducer.reducer
};

import {Component,Input,OnChanges,OnInit} from '@angular/core';
import {select,Store} from '@ngrx/store';
import {State} from '../../../store/reducers/controlReducer';


@Component({
  selector: 'app-visualization',templateUrl: './visualization.component.html',styleUrls: ['./visualization.component.css']
})


export class VisualizationComponent implements OnChanges,OnInit{
  @Input() title: string;
  @Input() minValue: number;
  @Input() maxValue: number;
  @Input() typeOfToggle: string;
  graph = {data: [],layout: {}};
  trace1 = {};
  trace2 = {};
  type: string;

  constructor(private store: Store<State>) {
  }

  ngOnInit() {
    this.store.pipe(select(state => state.selectedOption)).subscribe(type => {this.type = type; });
  }

  ngOnChanges() {
  this.graph = {
      data: [
        this.trace1 = {
          x: [0,10,20,30,45,50,40],y: [0,60,40,60],name: 'Blue Trace',type: this.type,mode: 'markers',marker: {
            size: [10,40]
          }
        },this.trace2 = {
      x: [0,20],50],name: 'Orange Trace',marker: {
        size: [10,40]
      }
    },],layout: {width: 500,height: 500,title: this.title,xaxis: { type: this.typeOfToggle,range: [this.minValue,this.maxValue]},yaxis: { type: this.typeOfToggle,this.maxValue]}}
    };
  }
}

解决方法

我想我注意到了这个问题。您实际上必须更深一层，您要查找的状态不是直接在状态对象中而是在控件属性中，请参阅：

export interface State {
  control: fromControlReducer.State;
}

在您的情况下，您实际上应该像这样编写选择器。

this.store.select(state => state.control.selectedOption).subscribe(...)

但是有更好的方法。创建一些专用的选择器，然后它会更健壮，更容易重用，就像这样：

// control.selectors.ts
export const contolState = (state: AppState) => state.control;

export const selectedOptionSelector = createSelector(contolState,state => state.selectedOption);

然后像这样使用它：

this.store.select(selectedOptionSelector ).subscirbe(...)