QUICK GET STARTED WITH NGXS

What is NGXS

NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application’s state, providing simple rules for predictable state mutations.

NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NGRX but reduces boilerplate by using modern TypeScript features such as classes and decorators.

Adding to an Angular Project

Installing Requirements

Core

npm install @ngxs/store --save

Debugging Plugin

@ngxs/logger-plugin @ngxs/devtools-plugin --dev

Storage Plugin

npm install @ngxs/storage-plugin --save

• Chrome Redux Debugger
• Firefox Redux Debugger

Adding to an root app module

import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';

@NgModule({
  imports: [  
   // Main Module
   NgxsModule.forRoot([]),
   // Plugins
   NgxsStoragePluginModule.forRoot()
   NgxsReduxDevtoolsPluginModule.forRoot()
   ]
})
export class AppModule {}

Note

It is recommended to register the storage plugin before other plugins so initial state can be picked up by those plugins.

Comments