{"id":28835734,"url":"https://github.com/odonno/ngrx-lazy","last_synced_at":"2026-04-24T11:38:26.331Z","repository":{"id":57818965,"uuid":"527558763","full_name":"Odonno/ngrx-lazy","owner":"Odonno","description":"Dead simple data lazy loading for @ngrx state management. Inspired by the early work of @Synthx","archived":false,"fork":false,"pushed_at":"2023-02-05T17:35:33.000Z","size":469,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-25T03:37:29.154Z","etag":null,"topics":["angular","lazy-loading","ngrx","rxjs","state","state-management"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngrx-lazy","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Odonno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-22T12:39:50.000Z","updated_at":"2023-02-05T16:28:46.000Z","dependencies_parsed_at":"2023-02-19T00:45:42.034Z","dependency_job_id":null,"html_url":"https://github.com/Odonno/ngrx-lazy","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Odonno/ngrx-lazy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odonno%2Fngrx-lazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odonno%2Fngrx-lazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odonno%2Fngrx-lazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odonno%2Fngrx-lazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Odonno","download_url":"https://codeload.github.com/Odonno/ngrx-lazy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odonno%2Fngrx-lazy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260730407,"owners_count":23053640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","lazy-loading","ngrx","rxjs","state","state-management"],"created_at":"2025-06-19T10:10:47.984Z","updated_at":"2026-04-24T11:38:26.326Z","avatar_url":"https://github.com/Odonno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngrx-lazy\n\nDead simple data lazy loading for [@ngrx](https://github.com/ngrx) state management.\n\nInspired by the early work of [@Synthx](https://github.com/Synthx)\n\n## Get started\n\n```\nnpm install ngrx-lazy --save\n```\n\n## How to use?\n\nTo fully understand how to use this library, we'll go through an example of a project that list brands on an e-commerce website.\n\n### Lazy state\n\nA lazy state is made of several properties:\n\n```ts\ntype Lazy\u003cT\u003e = {\n  fetched: boolean;\n  pending: boolean;\n  error?: any;\n  data: T;\n};\n```\n\nYou can then use the `createLazy` function to initialize your feature state.\n\n```ts\nimport { createLazy, Lazy } from \"ngrx-lazy\";\nimport { Brand } from \"./models\";\n\nexport interface BrandsState {\n  all: Lazy\u003cBrand[]\u003e;\n  popular: Lazy\u003cBrand[]\u003e;\n}\n\nexport const initialBrandsState: BrandsState = {\n  all: createLazy\u003cBrand[]\u003e([]),\n  popular: createLazy\u003cBrand[]\u003e([]),\n};\n```\n\nIn this example, we create two lazy loadable array of brands inside our brands feature state.\n\n### Lazy reducers\n\nOnce you have created your state, you can handle the reducers based on a simple data fetching logic.\n\n```ts\nimport { createReducer, on } from \"@ngrx/store\";\nimport * as BrandsActions from \"./brands.actions\";\nimport { initialBrandsState } from \"./brands.state\";\n\nexport const brandsReducer = createReducer(\n  initialBrandsState,\n\n  on(BrandsActions.loadAll, (state) =\u003e ({\n    ...state,\n    all: { ...state.all, pending: true },\n  })),\n  on(BrandsActions.loadAllSuccess, (state, { brands }) =\u003e ({\n    ...state,\n    all: { data: brands, fetched: true, pending: false },\n  })),\n  on(BrandsActions.loadAllError, (state, { error }) =\u003e ({\n    ...state,\n    all: { ...state.all, pending: false, error },\n  })),\n\n  on(BrandsActions.loadPopular, (state) =\u003e ({\n    ...state,\n    popular: { ...state.popular, pending: true },\n  })),\n  on(BrandsActions.loadPopularSuccess, (state, { popularBrands }) =\u003e ({\n    ...state,\n    popular: { data: popularBrands, fetched: true, pending: false },\n  })),\n  on(BrandsActions.loadPopularError, (state, { error }) =\u003e ({\n    ...state,\n    popular: { ...state.popular, pending: false, error },\n  }))\n);\n```\n\n### Lazy selectors\n\nYou can create basic selectors using the existing `createSelector` from @ngrx.\n\n```ts\nimport { createSelector } from \"@ngrx/store\";\nimport { getEntityState } from \"../selectors/entity.selectors\";\n\nconst selectBrandsState = createSelector(\n  getEntityState,\n  (state) =\u003e state.brands\n);\n\nconst lazyAll = createSelector(selectBrandsState, (state) =\u003e state.all);\n\nconst selectBrands = createSelector(lazyAll, (lazy) =\u003e lazy.data);\nconst selectBrandBySlug = (slug: string) =\u003e\n  createSelector(selectBrands, (brands) =\u003e brands.find((b) =\u003e b.slug === slug));\n\nexport const AllBrandsSelectors = {\n  selectLazy: lazyAll,\n  selectBrands,\n  selectBrandBySlug,\n};\n\nconst lazyPopular = createSelector(selectBrandsState, (state) =\u003e state.popular);\n\nconst selectPopularBrands = createSelector(lazyPopular, (lazy) =\u003e lazy.data);\n\nexport const PopularBrandsSelectors = {\n  selectLazy: lazyPopular,\n  selectPopularBrands,\n};\n```\n\nIn order to make this library shine, you absolutely need a Facade on top of the selector. Here is an example what it can looks like:\n\n```ts\nimport { Injectable } from \"@angular/core\";\nimport { Store } from \"@ngrx/store\";\nimport { selectLazy } from \"ngrx-lazy\";\nimport { RootState } from \"../models\";\nimport * as BrandsActions from \"./brands.actions\";\nimport { AllBrandsSelectors, PopularBrandsSelectors } from \"./brands.selectors\";\n\n@Injectable()\nexport class BrandsSelectors {\n  constructor(private readonly store: Store) {}\n\n  lazyAll$ = selectLazy({\n    store: this.store,\n    selector: AllBrandsSelectors.lazyAll,\n    loadAction: BrandsActions.loadAll(),\n  });\n\n  brands$ = this.lazyAll$.select(AllBrandsSelectors.getBrands);\n  brandBySlug$ = (slug: string) =\u003e\n    this.lazyAll$.select(AllBrandsSelectors.getBrandBySlug(slug));\n  brandById$ = (id: number) =\u003e\n    this.lazyAll$.select(AllBrandsSelectors.getBrandById(id));\n\n  lazyPopular$ = selectLazy({\n    store: this.store,\n    selector: PopularBrandsSelectors.lazyPopular,\n    loadAction: BrandsActions.loadPopular(),\n  });\n\n  popularBrands$ = this.lazyPopular$.select(\n    PopularBrandsSelectors.getPopularBrands\n  );\n}\n```\n\nNow, when you call any property on this selector service, it will automatically trigger the data loading related to state of the lazy state.\n\nOf course, you'd need to implement Effects to execute data fetching!\n\n### RxJS operators\n\n#### firstNotPending\n\nThe operator `firstNotPending` takes a lazy selector and dispatch the first value of the selector once data fetching is done.\n\n```ts\nconst allBrands$: Observable\u003cBrand[]\u003e = this.brandsSelectors.lazyAll$.pipe(firstNotPending()):\n```\n\n#### skipUntilLazyLoaded\n\nThe operator `skipUntilLazyLoaded` takes a selector and dispatch its values only once a parent selector is fully lazy loaded (once data fetching is done).\n\n```ts\nconst brand$: Observable\u003cBrand\u003e = this.brandsSelectors.brandById$(id).pipe(\n    skipUntilLazyLoaded(this.brandsSelectors.lazyAll$),\n):\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodonno%2Fngrx-lazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodonno%2Fngrx-lazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodonno%2Fngrx-lazy/lists"}