Getting Started

Angular

First, install:

npm i -s @state-adapt/core
npm i -s @state-adapt/rxjs
npm i -s @state-adapt/angular

Then include in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { defaultStoreProvider } from '@state-adapt/angular';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [defaultStoreProvider], 
});

---

For options, see @state-adapt/angular.

StackBlitz Starter

With NgRx/Store

You probably don't need this.

This enables

1. Redux Devtools to sync and show both stores' states together
2. Selecting from both global states. StateAdapt's state is nested in a hidden top-level adapt reducer.

DEPRECATED

The @state-adapt/ngrx library is deprecated and will be removed in StateAdapt v4.

If you still need it, copy the files from https://github.com/state-adapt/state-adapt/tree/main/libs/ngrx/src/lib into your project and use them directly.

First, install:

npm i -s @state-adapt/{core,rxjs,angular,ngrx}

Add to the root NgRx/Store config:

import { isDevMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { adaptReducer, actionSanitizer, stateSanitizer } from '@state-adapt/core'; 

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({
      count: counterReducer,
      adapt: adaptReducer, 
    }),
    provideStoreDevtools({
      logOnly: !isDevMode(),
      actionSanitizer, 
      stateSanitizer, 
    }),
  ],
});

Now in a component or service:

import { adaptNgrx } from '@state-adapt/ngrx';
// ...
nameStore = adaptNgrx('Bob');

StackBlitz Starter

Angular with NGXS

You probably don't need this.

This enables

1. Redux Devtools to sync and show both stores' states together
2. Selecting from both global states. StateAdapt's state is nested in a hidden top-level adapt reducer.

DEPRECATED

The @state-adapt/ngxs library is deprecated and will be removed in StateAdapt v3.1.

If you still need it, copy the files from https://github.com/state-adapt/state-adapt/tree/main/libs/ngxs/src/lib into your project and use them directly.

First, install:

npm i -s @state-adapt/{core,rxjs,angular,ngxs}

Then include in main.ts:

import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { actionSanitizer, stateSanitizer } from '@state-adapt/core';
+import { AdaptState } from '@state-adapt/ngxs';
// ...
// In your module imports array:
    NgxsModule.forRoot(
      [AdaptState],
      {
        developmentMode: !environment.production
      },
    ),
    NgxsReduxDevtoolsPluginModule.forRoot({
      disabled: environment.production,
      actionSanitizer, 
      stateSanitizer, 
    }),

Now in a component or service:

import { adaptNgxs } from '@state-adapt/ngxs';
// ...
nameStore = adaptNgxs('Bob');