如何从 Reducer Ngrx 中获取一些价值

Question

我有以下减速器

import { EntityState, createEntityAdapter } from '@ngrx/entity';
import { createFeatureSelector } from '@ngrx/store';

export const pageAdapter = createEntityAdapter<Page>({
  //selectId: (collection: Collection) => collection.id,
});

export interface State extends EntityState<Page> {
}

const defaultPage = {
    ids: ['kHnryus'],
    entities: {
        'kHnryus': {
        id: '83nryus',
        title: 'How to create a blog with Angular4 Ngrx',
        description: 'How to create a blog with Angular4 Ngrx',
    }
  },
  success_create: false
}

export const initialState: State = pageAdapter.getInitialState();

// Reducer
export function pageReducer(
    state: State = initialState,
    action: actions.PageActions) {

    switch (action.type) {
        case actions.ADD_ALL: {
            return pageAdapter.addAll(action.pages, state);
          };
        case actions.SUCCESS: {
            return {success_create: true}
        };
        default:
            return state;
        }

}

// Create the default selectors
export const getPageState = createFeatureSelector<State>('page');

export const {
    selectIds,
    selectEntities,
    selectAll,
    selectTotal,
  } = pageAdapter.getSelectors(getPageState);

我想获取组件中状态的布尔变量success_create。

基本上，我希望如果有 SUCCESS，我应该能够在组件 class 中得到一个 success_create true。我不知道如何做到这一点，即使这是可能的。

如果是，请问我该如何实现？

Answer 1

首先确保删除 defaultPage 常量，因为您没有在 reducer 中维护它并且您已经为此使用了 @ngrx/entity。 success_create 应定义如下：

export interface State extends EntityState<Page> {
  success_create: boolean;
}

export const adapter: EntityAdapter<Item> = createEntityAdapter<Page>({
  selectId: (page: Page) => page.id,
  sortComparer: false
});

export const initialState: State = adapter.getInitialState({
  success_create: false,
});

然后，在您的 默认选择器 之后添加第三个使用 getPageState 选择器的选择器并更深入地了解您的状态：

export const getSuccessCreate = createSelector(
  getPageState, 
  (state: State) => state.success_create
);

然后让你的 component/service 直接像这样收听：

this.created$ = this.store.pipe(select(fromPages.getSuccessCreate));

注意：管道在这里是可选的，如果使用，则 select 应该从 @ngrx/store 导入，因为它已完成 in the official ngrx demo app. pipe allow you to work with lettable rxjs operators. you can read more about it here.

如何从 Reducer Ngrx 中获取一些价值

How to get some value from Reducer Ngrx

redux

ngrx