CODEWITHSUNDEEP
reduxngrx
LearnToday
LearnToday

Reputation: 2902

How to get some value from Reducer Ngrx

I have the following reducer 

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);

I want to get the boolean variable success_create of the state in my component.

Basically , I want that if there is SUCCESS, I should be able to get a success_create true in the component class. I have no idea as to how to do this and even if it's possible.

If it is, please how can I achieve this?

Upvotes: 1

Views: 859

Answers (1)

Salem Ouerdani
Salem Ouerdani

Reputation: 7886

First make sure to remove defaultPage constant as you are not maintaining it within your reducers and you are already using @ngrx/entity for that. The success_create should be defined as follow:

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,
});

Then, after your default selectors add a third one that uses getPageState selector and gets one step deeper into your state:

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

Then make your component/service listening to it directly like:

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

note: the pipe is optional here and if used then select should be imported from @ngrx/store as it is done in the official ngrx demo app. pipe allow you to work with lettable rxjs operators. you can read more about it here.

Upvotes: 1

Related Questions