NGRX Store.select的投影狀態不正確

Question

當我做

valueToDisplay$ =store.select('model','sub-model')

valueToDisplay $的值最終是“ model”的值。 我已經嘗試了很多事情來使狀態正確投影，但是很明顯我缺少有關NGRX存儲區引導程序的關鍵信息。

AppComponent
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';


import { AppComponent } from './app.component';
import { SetViewComponent } from './set-view/set-view.component';
import { MoveInputComponent } from './move-input/move-input.component';
import { MoveViewComponent } from './move-view/move-view.component';
import { movementsReducer } from './shared/store/set.store';



@NgModule({
  declarations: [
    AppComponent,
    SetViewComponent,
    MoveInputComponent,
    MoveViewComponent,
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({movementsReducer:movementsReducer})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

減速器：當前過度嵌套的狀態對象，但是它並沒有改變我到目前為止的基本方法。

import { DanceSet, Movement } from "../model/model";
import { Action, ActionReducerMap } from "@ngrx/store";
import { Injectable } from "@angular/core";
// STATE
export interface MovementState {
    movementsReducer:{
        movements?:Movement[],
        lastId?:number
    },
}
export const INITIAL_STATE:MovementState = {
    movementsReducer:{movements:[],lastId:0},

}
// ACTION NAMES
export enum MovementActionTypes  {
    ADD_MOVEMENT='[MOVEMENT] ADD_MOVEMENT',
    REMOVE_MOVEMENT='[MOVEMENT] REMOVE_MOVEMENT'
}

// ACTION CLASSES
export class AddMovementAction implements Action {
    readonly type = MovementActionTypes.ADD_MOVEMENT;
    constructor(public payload: Movement){};
}
export class RemoveMovementAction implements Action{
    readonly type =  MovementActionTypes.REMOVE_MOVEMENT;
    constructor(public payload:number){};
}

// Action TYPES
export type MovementActions
    = AddMovementAction | RemoveMovementAction

//Util
export function filterOutMovement(movements:Movement[], id:number):Movement[]{
    return movements.filter(item =>item.id !== id);
}

// Dance Set Reducer
export function movementsReducer(state: MovementState = INITIAL_STATE, action:any ): MovementState{
    switch(action.type){
        case MovementActionTypes.ADD_MOVEMENT:
            return {
                ...state,
                movementsReducer:{movements: [...state.movementsReducer.movements, action.payload], lastId:state.movementsReducer.lastId+1},
            }
        case MovementActionTypes.REMOVE_MOVEMENT:
            return{
             ...state,
                movementsReducer:{movements:filterOutMovement(state.movementsReducer.movements,action.payload), lastId:state.movementsReducer.lastId}
            }   
    default:
        return state;
    }
}

當前視圖組件：在我的模板中，我試圖顯示當前的“ movies $”是什么，但是當我實際記錄對象是什么時，我看到這不是狀態的一部分，而是整個狀態本身。

import { Component, OnInit } from '@angular/core';
import { MovementState, MovementActionTypes, AddMovementAction } from '../shared/store/set.store';
import { Store, select } from '@ngrx/store';
import { Movement } from '../shared/model/model';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-set-view',
  templateUrl: './set-view.component.html',
  styleUrls: ['./set-view.component.css']
})
export class SetViewComponent implements OnInit {
  public movements$:Array<Movement>;
  subscription;

  constructor(private store:Store<MovementState>) { 
    this.subscription = this.store.select('movementsReducer', 'movements').subscribe(value => this.movements$=value);
  }

  ngOnInit() {
  }

  addMove(name, id){
    let move = new Movement('Test',1);
    this.store.dispatch(new AddMovementAction(move));
  }

}

Answer 1

創建功能選擇器和針對我想要的一小段狀態的選擇器似乎可以解決問題。 從API擴展塢看來，我似乎'不需要'這樣做，但是，這就是IT了。

import { createFeatureSelector, createSelector, ActionReducerMap, ActionReducer, MetaReducer } from "@ngrx/store";
import { MovementState, movementsReducer } from "./set.store";
import { environment } from "../../../environments/environment";

export interface AppState{
    movementState:MovementState;
}
export const getMovementState = createFeatureSelector<MovementState>('movementState');

export const getMovements = createSelector(
    getMovementState,
    (state:MovementState) => state.movementReducer.movements
)
export const getLastId = createSelector(
    getMovementState,
    (state:MovementState) => state.movementReducer.lastId
)

export const reducers: ActionReducerMap<AppState>={
    movementState:movementsReducer
}

export function logger(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
    return function(state: AppState, action: any): AppState {
      console.log('state', state);
      console.log('action', action);
      return reducer(state, action);
    };
  } 


export const metaReducers: MetaReducer<AppState>[] = !environment.production
? [logger]
: [];