@moatamed-sce/shared-state

The NgRx state layer of the SCE Platform: the feature stores that the SCE feature packages read from — actions, reducers, effects and selectors, all registered through createFeature.

Status — not published

This package is not currently on npmjs.org. It exists in the SCE monorepo and in the build output, but no version has been pushed to the public registry.

That has a knock-on effect: @moatamed-sce/features and @moatamed-sce/feature-contracts both declare @moatamed-sce/shared-state as a peer dependency, so neither of them can be installed from npm today — the peer will not resolve. The combination that works from the registry right now is @moatamed-sce/core + @moatamed-sce/ui-components.

If you are consuming the SCE design system, you do not need this package: the components in ui-components are presentational and hold no store state.

What's in it

Two feature stores, exported from the package root:

• Permissions — PermissionsActions, permissionsFeature, and the selectors selectUserActions, selectHasUserActions, selectPermissionsLoading, selectPermissionsLoaded, selectPermissionsError, selectPermissionsReady, plus the PermissionsState type. This store holds the current user's action flags and is what the platform's RBAC checks read.
• Lookups — LookupsActions, lookupsFeature, the loadLookups effect, and the selectors selectAllLookups, selectLookupsLoading, selectLookupsLoaded, selectLookupsErrorKey. This store caches the backend's reference data (contract types, service types, regions, and the rest) so that pages do not refetch it.

Both follow the same conventions: createActionGroup for actions, createFeature for the reducer, functional createEffect, and selectors consumed in components through store.selectSignal(...).

Install

Once published:

npm install @moatamed-sce/shared-state @moatamed-sce/core

Until then, the package is reachable only from inside the SCE monorepo, where @moatamed-sce/shared-state is a TypeScript path alias onto libs/shared-state/src.

Peer dependencies

Angular 21 (@angular/core), @ngrx/store 21, @ngrx/effects 21, RxJS 7.8, and @moatamed-sce/core — the effects call into core's API services, so core is a hard requirement rather than an optional one.

Quick start

Register the features you need in your application config, alongside the NgRx root providers:

import { ApplicationConfig } from '@angular/core';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { permissionsFeature, lookupsFeature, loadLookups } from '@moatamed-sce/shared-state';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideState(permissionsFeature),
    provideState(lookupsFeature),
    provideEffects({ loadLookups }),
  ],
};

Then read state in a component with signals:

import { Component, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { LookupsActions, selectAllLookups, selectLookupsLoading } from '@moatamed-sce/shared-state';

@Component({ selector: 'app-lookups', standalone: true, template: '' })
export class LookupsComponent {
  private readonly store = inject(Store);

  readonly lookups = this.store.selectSignal(selectAllLookups);
  readonly loading = this.store.selectSignal(selectLookupsLoading);

  load(): void {
    this.store.dispatch(LookupsActions.loadLookups());
  }
}

Because the effects go through core's API services, the store expects an SCE backend behind them.

Docs

• Consuming the packages in an external app
• Design tokens
• Component catalog

License

MIT