How to use the @ngrx/store.createSelector function in @ngrx/store

To help you get started, we’ve selected a few @ngrx/store examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Swing-team / pendulums-web-client / src / app / shared / state / note / notes.selectors.ts View on Github external
/**
 *  Because the data structure is defined within the reducer it is optimal to
 *  locate our selector functions at this level. If store is to be thought of
 *  as a database, and reducers the tables, selectors can be considered the
 *  queries into said database. Remember to keep selectors small and
 *  focused so they can be combined and composed to fit each particular
 *  use-case.
 */

@Injectable()
export class NotesSelectors {
  getEntities = (state: Notes) => state.entities;
  getSortBy = (state: Notes) => state.sortBy;
  // tslint:disable-next-line: member-ordering
  getAllArray = createSelector(this.getEntities, this.getSortBy, (entities, sortBy) => {
    return values(entities).sort((n1, n2) => {
      switch (sortBy) {
        case '+date': {
          return n1.id > n2.id ? 1 : -1;
        }
        case '-date': {
          return n1.id < n2.id ? 1 : -1;
        }
        case '+title': {
          return n1.title.toLowerCase() >= n2.title.toLowerCase() ? 1 : -1;
        }
        case '-title': {
          return n1.title.toLowerCase() < n2.title.toLowerCase() ? 1 : -1;
        }
      }
    });
github ngrx / platform / modules / store / spec / integration.spec.ts View on Github external
it('should use the selector and props to get a todo', (done: DoneFn) => {
        const getTodosState = createFeatureSelector(
          'todos'
        );
        const getTodos = createSelector(getTodosState, todos => todos);
        const getTodosById = createSelector(
          getTodos,
          (state: TodoAppSchema, id: number) => id,
          (todos, id) => todos.find(todo => todo.id === id)
        );

        const todo$ = store.select(getTodosById, 2);
        todo$
          .pipe(
            take(3),
            toArray()
          )
          .subscribe(res => {
            expect(res).toEqual([
              undefined,
              { id: 2, text: 'second todo', completed: false },
              { id: 2, text: 'second todo', completed: true },
github ngrx / platform / modules / store / spec / selector.spec.ts View on Github external
it('should recursively release ancestor selectors', () => {
      const grandparent = createSelector(incrementOne, a => a);
      const parent = createSelector(grandparent, a => a);
      const child = createSelector(parent, a => a);
      spyOn(grandparent, 'release').and.callThrough();
      spyOn(parent, 'release').and.callThrough();

      child.release();

      expect(grandparent.release).toHaveBeenCalled();
      expect(parent.release).toHaveBeenCalled();
    });
  });
github graycoreio / daffodil / libs / product / src / reducers / index.ts View on Github external
*/
export const selectBestSellersState = createSelector(
  selectProductState,
  (state: State) => state.bestSellers
);
/**
 * Selector for the loading state of best selling products.
 */
export const selectBestSellersLoadingState : MemoizedSelector = createSelector(
  selectBestSellersState,
  fromBestSellers.getBestSellersLoading
);
/**
 * Selector for the IDs of best selling products.
 */
export const selectBestSellersIdsState : MemoizedSelector = createSelector(
  selectBestSellersState,
  fromBestSellers.getBestSellersIds
);
/**
 * Selector for the best selling products.
 */
export const selectBestSellersProducts: MemoizedSelector = createSelector(
  selectBestSellersIdsState,
  selectAllProducts,
  (ids: string[], products: DaffProductUnion[]) => products.filter(product => ids.indexOf(product.id) > -1)
)
github Lumeer / web-ui / src / app / core / store / navigation / navigation.state.ts View on Github external
perspective?: Perspective;
  searchTab?: SearchTab;
  viewName?: string;
  viewCursor?: ViewCursor;
  url: string;
  previousUrl?: string;
}

export const initialNavigationState: NavigationState = {
  query: {},
  workspace: {},
  url: '/',
};

export const selectNavigation = (state: AppState) => state.navigation;
export const selectQuery = createSelector(
  selectNavigation,
  (state: NavigationState) => state.query
);

export const selectQueryWithoutLinks = createSelector(
  selectQuery,
  currentQuery => queryWithoutLinks(currentQuery)
);

export const selectPerspective = createSelector(
  selectNavigation,
  (state: NavigationState) => state.perspective
);
export const selectWorkspace = createSelector(
  selectNavigation,
  (state: NavigationState) => state.workspace
github johnpapa / angular-ngrx-data / lib / src / selectors / related-entity-selectors.spec.ts View on Github external
function createHeroPowersSelector$(heroId: number): Observable {
      const { selectHeroMap, selectHeroPowerIds, selectPowerMap } = setCollectionSelectors();

      const selectHero = createSelector(selectHeroMap, heroes => heroes[heroId]);

      const selectHeroPowers = createSelector(selectHero, selectHeroPowerIds, selectPowerMap, (hero, heroPowerIds, powerMap) => {
        const hid = hero && hero.id;
        const pids = heroPowerIds[hid] || [];
        const powers = pids.map(id => powerMap[id]).filter(power => power);
        return powers;
      });
      return store.select(selectHeroPowers);
    }
github burke-software / django-report-builder / js / src / app / selectors.ts View on Github external
);
export const getFormatOptions = createSelector(
  getConfigState,
  configSelectors.getFormatOptions
);

const getReportsState = (state: State) => state.reports;
export const getReports = createSelector(
  getReportsState,
  reportSelectors.getReports
);
export const getSelectedReport = createSelector(
  getReportsState,
  reportSelectors.getSelectedReport
);
export const getSelectedReportId = createSelector(
  getReportsState,
  reportSelectors.getSelectedReportId
);
export const getSelectedReportName = createSelector(
  getReportsState,
  reportSelectors.getSelectedReportName
);
export const getFields = createSelector(
  getReportsState,
  reportSelectors.getFields
);
export const getTitle = createSelector(
  getReportsState,
  reportSelectors.getTitle
);
export const getRightNavIsOpen = createSelector(
github ngrx / platform / modules / effects / spec / effects_feature_module.spec.ts View on Github external
return {
        ...state,
        data: state.data + 10,
      };
    case 'CREATE_INCREASE':
      return {
        ...state,
        createData: state.createData + 20,
      };
  }
  return state;
}

const getFeatureState = createFeatureSelector(FEATURE_KEY);

const getDataState = createSelector(getFeatureState, state => state.data);
const getCreateDataState = createSelector(
  getFeatureState,
  state => state.createData
);

@Injectable()
class FeatureEffects {
  constructor(private actions: Actions, private store: Store) {}

  @Effect()
  effectWithStore = this.actions.pipe(
    ofType('INCREMENT'),
    withLatestFrom(this.store.select(getDataState)),
    map(([action, state]) => ({ type: 'INCREASE' }))
  );
github angular-university / ngrx-course-v7 / src / app / courses / course.selectors.ts View on Github external
courses => courses.filter(course => course.category === 'ADVANCED')
);

export const selectPromoTotal = createSelector(
  selectAllCourses,
    courses => courses.filter(course => course.promo).length
);


export const allCoursesLoaded = createSelector(
  selectCoursesState,
  coursesState => coursesState.allCoursesLoaded
);


export const selectAllLessons = createSelector(
    selectLessonsState,
    fromLesson.selectAll

);


export const selectLessonsPage = (courseId:number, page:PageQuery) => createSelector(
  selectAllLessons,
  allLessons => {

    const start = page.pageIndex * page.pageSize,
          end = start + page.pageSize;

    return allLessons
            .filter(lesson => lesson.courseId == courseId)
            .slice(start, end);
github legumeinfo / lis_context_viewer / client / src / app / reducers / clustered-micro-tracks.store.ts View on Github external
loading: true,
      };
    case clusteredMicroTrackActions.GET_SUCCESS:
      return {
        ...action.payload,
        loading: false,
        loaded: true,
      };
    default:
      return state;
  }
}

export const getClusteredMicroTracksState = createFeatureSelector("clusteredMicroTracks");

export const getClusteredMicroTracks = createSelector(
  getClusteredMicroTracksState,
  (state) => state.tracks,
);