NgRx 无法从商店获取状态答案

【问题标题】：NgRx cant get state from storeNgRx 无法从商店获取状态
【发布时间】：2021-04-08 07:05:01
【问题描述】：

在我的应用程序中，我想选择值并重新渲染绘图类型取决于 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, 20, 30, 40],
          y: [0, 30, 60, 40, 10, 20, 20, 10, 60],
          name: 'Blue Trace',
          type: this.type,
          mode: 'markers',
          marker: {
            size: [10, 20, 30, 40]
          }
        },
    this.trace2 = {
      x: [0, 10, 10, 20, 30, 40, 10, 20, 20],
      y: [0, 40, 10, 30, 20, 20, 40, 50, 50],
      name: 'Orange Trace',
      type: this.type,
      mode: 'markers',
      marker: {
        size: [10, 20, 30, 40]
      }
    },
      ],
      layout: {width: 500, height: 500, title: this.title,
        xaxis: { type: this.typeOfToggle, range: [this.minValue, this.maxValue]},
        yaxis: { type: this.typeOfToggle, range: [this.minValue, this.maxValue]}}
    };
  }
}

【问题讨论】：

您是否尝试过创建选择器？或者至少将选择重写为：this.store.select(state => state.selectedOption).subscirbe(...)
试过了，没有任何反应，我得到了 undefined

标签： javascript angular typescript ngrx ngrx-store

【解决方案1】：

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

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(...)

【讨论】：