ngrx选择返回存储不是值

Question

catalogueselection in Store Image

我在state（catalogueSelection）中需要数据并需要将字符串的“ searchTextresult”传递到一个组件中，而“ andaray”类别“ checkboxresult”中。

当我尝试检索所需的值时，我正在检索整个商店。我在这里查看了许多网站和条目，但现在变得非常困惑。

模型：

export class SearchTextResult {
  searchTextResult: string;
}

export class CategoryCheckboxResult {
  categoryCheckboxResult:Array<CategoryCheckboxResult>;
}

操作：

import { Action } from '@ngrx/store';
import { SearchTextResult, CategoryCheckboxResult } from 'app/@core/services/products/products.model';

export enum UserCatalogueSelectionTypes {
    AddSearchTextResult = '[SearchTextResult] AddResult',
    AddCategoryCheckboxResult = '[CategoryCheckboxResult] AddResult',
    GetSearchTextResult = '[SearchTextResult] GetResult',
}

export class AddSearchTextResult implements Action {
    readonly type = UserCatalogueSelectionTypes.AddSearchTextResult;
    constructor(public payload: SearchTextResult){
    }
}

export class AddCategoryCheckboxResult implements Action {
    readonly type = UserCatalogueSelectionTypes.AddCategoryCheckboxResult;
    constructor(public payload: CategoryCheckboxResult){
    }
}

export class GetSearchTextResult implements Action {
    readonly type = UserCatalogueSelectionTypes.GetSearchTextResult;
}

export type UserCatalogueSelectionUnion =
| AddSearchTextResult
| AddCategoryCheckboxResult
| GetSearchTextResult

缩小器：

import { SearchTextResult, CategoryCheckboxResult} from "app/@core/services/products/products.model";
import { UserCatalogueSelectionTypes,  UserCatalogueSelectionUnion} from "../actions/products.actions";


export interface UserCatalogueSelectionState {
 searchTextResult: SearchTextResult | null;
 categoryCheckboxResult: CategoryCheckboxResult | null;
}

export const initialState: UserCatalogueSelectionState = {
    searchTextResult: null,
    categoryCheckboxResult: null,
}

 
export function reducer(state:UserCatalogueSelectionState = initialState, action: UserCatalogueSelectionUnion ): UserCatalogueSelectionState{
    switch (action.type) {
        case UserCatalogueSelectionTypes.AddSearchTextResult: 
            return {
                ...state, 
                searchTextResult: action.payload,
            };
        
        case UserCatalogueSelectionTypes.AddCategoryCheckboxResult: 
            return {
                ...state, 
                categoryCheckboxResult: action.payload,
            };

        case UserCatalogueSelectionTypes.GetSearchTextResult: {
            return state;
        }
            
        default: {
            return state;
        }

    }
}

选择器：

import { createSelector,createFeatureSelector } from "@ngrx/store";
import {UserCatalogueSelectionState} from '../../store/reducer/products.reducer';

export const fetchSearchTextResults = createFeatureSelector<UserCatalogueSelectionState>("searchTextResult");

export const fetchSearchTextResult = createSelector (
    fetchSearchTextResults,
    (state:UserCatalogueSelectionState) => state.searchTextResult.searchTextResult
);

export const fetchCatalogueCheckBoxResults = createFeatureSelector<UserCatalogueSelectionState>("catalogueCheckboxResult");

export const fetchCatalogueCheckBoxResult = createSelector (
    fetchCatalogueCheckBoxResults,
    (state: UserCatalogueSelectionState) => state.categoryCheckboxResult.categoryCheckboxResult
);

我的组件1

可观察：

public searchTextResult: Observable<String>;

contructor：（一部分）

private store: Store<fromCatalogueSelection.UserCatalogueSelectionState>

代码代码段：（询问数据）

this.searchTextResult = this.store.select('SearchTextResult');
console.log('TESTING SEARCH TEXT: ', this.searchTextResult);

控制台：

测试搜索文本：商店＆nbsp; {_ isscalar：false，actionsobserver：actionsSubject，reducerManager：＆gt; reducerManager，来源：商店，operator：dimpptionuntilChangeDoperator}

我的组件2

可观察的代码2可观察的

searchTextResult$: Observable<CatalogueSelectionActions.GetSearchTextResult>;

代码smippet：（询问数据）

this.searchTextResult$ = this.store.select('GetSearchTextResult');
console.log('TESTING SEARCH TEXT: ', this.searchTextResult$);

控制台：

测试搜索文本：商店＆nbsp; {_ isscalar：false，actionsobserver：actionsSubject，reducerManager：＆gt; Reducermanager，来源：商店，操作员：独特的nuntilChangedOperator}

目前我已经放弃了选择器上的独特努力。当我要盘旋时，任何帮助都非常感谢。

Answer 1

您几乎在那里，控制台日志的值是可观察的对象，每次从商店中选择某些东西时，都会在可观察到的中获得包装的值。您只需要订阅：

this.searchTextResult$ = this.store.select('GetSearchTextResult');
this.searchTextResult$.subscribe((yourData) => console.log(yourData));

另外，由于您正在使用选择器，请使用它们，因此您不必编写状态/选择器名称：

Selector

...
export const fetchCatalogueCheckBoxResult = createSelector (
    fetchCatalogueCheckBoxResults,
    (state: UserCatalogueSelectionState) => 
      state.categoryCheckboxResult.categoryCheckboxResult
);

组件

import * as YourSelectors from './store/something/selectors/yourthing.selectors'

...
...
this.searchTextResult$ = this.store
    .select(YourSelectors.fetchCatalogueCheckBoxResult)
    .subscribe(console.log);

此外，尝试使用使用async管道将其委派给模板html，以便您不必交易例如，代码中的订阅：

组件

...
export class Component {
  searchTextResult$!: Observable<any> // your data type here
...
...
this.searchTextResult$ = this.store
    .select(YourSelectors.fetchCatalogueCheckBoxResult)
} 

html

<ng-container *ngIf="(searchTextResult$ | async) as result">
  <p>Your result value: {{ result }}</p>
</ng-container>