by Gerard Sans | @gerardsans





Google Developer Expert

Google Developer Expert
International Speaker

Spoken at 92 events in 25 countries

Blogger
Blogger
Community Leader

900
1.5K
Trainer

Master of Ceremonies

Master of Ceremonies












NGXS
Overview
-
Angular Developer Friendly
- Decorators
- Dependency Injection
- Life cycle hooks
- Minimal Setup
- Extensible via plugins
- Community driven
Components
Actions
State
Mutate
Dispatch
Notify

Observables
actions
states
A
A
A
S
S
S
Components
Actions
State
Mutate
Dispatch
Notify

Plugins
Actions
State

Counter
Increment
Decrement
Reset
Total
Components
Actions
State
Mutate
Dispatch
Notify

import { State } from '@ngxs/store';
@State<number>({
name: 'counter',
defaults: 0
})
export class CounterState { }
src/app.component.ts
Counter State
app/store/counter.state.ts
Components
Actions
State
Mutate
Dispatch
Notify

export class Increment {
static readonly type = "[Counter] Increment";
}
// const action = new Increment();
// {
// type: "[Counter] Increment"
// }
src/app.component.ts
Increment Action
app/store/counter.actions.ts
import { State, Action, StateContext } from '@ngxs/store';
import { Increment } from '../store/counter.actions';
@State<number>({ name: 'counter', defaults: 0 })
export class CounterState {
@Action(Increment)
Increment(store: StateContext<number>) {
const counter = store.getState();
store.setState(counter+1);
}
}
src/app.component.ts
Increment Action
app/store/counter.state.ts
export class Reset {
static readonly type = "[Counter] Reset";
constructor(public payload: { value: number }) { }
}
// const action = new Reset({ value: 0 });
// {
// type: "[Counter] Reset",
// payload: {
// value: 0
// }
// }
src/app.component.ts
Reset Action
app/store/counter.actions.ts
import { State, Action, StateContext } from '@ngxs/store';
import { Reset } from '../store/counter.actions';
@State<number>({ name: 'counter', defaults: 0 })
export class CounterState {
@Action(Reset)
Reset(store: StateContext<number>, action: Reset) {
const counter = store.getState();
store.setState(action.payload.value);
}
}
src/app.component.ts
Reset Action
app/store/counter.state.ts
Components
Actions
State
Mutate
Dispatch
Notify

@Component({
template: `
<app-counter
(increment)="increment()" (decrement)="decrement()"
(reset)="reset()">
</app-counter>`
})
export class AppComponent {
constructor(private store: Store) { }
increment = () => this.store.dispatch(new Increment());
decrement = () => this.store.dispatch(new Decrement());
reset = () => this.store.dispatch(new Reset({ value: 0 }));
}
src/app.component.ts
Dispatching Actions
app/app.component.ts
@Component({
template: `
<app-counter [total]="counter|async"></app-counter>`
})
export class AppComponent {
@Select(state => state.counter) counter: Observable<number>;
}
src/app.component.ts
Subscribing to the Store
app/app.component.ts
@Component({
selector: 'app-counter',
template: `
<div class="total">{{total}}</div>
<button (click)="increment.emit()">+</button>
<button (click)="decrement.emit()">-</button>
<button (click)="reset.emit()">C</button>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
@Input() total: number;
@Output() increment = new EventEmitter();
...
}
src/app.component.ts
Counter
app/counter/counter.component.ts
Plugins
Logger
DevTools
Storage
Forms
WebSockets
Router
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule }
from '@ngxs/devtools-plugin';
@NgModule({
imports: [
NgxsModule.forRoot([]),
NgxsReduxDevtoolsPluginModule.forRoot()
]
})
export class AppModule {}
src/app.component.ts
Adding DevTools Plugin
import { NgxsModule } from '@ngxs/store';
import { NgxsFormPluginModule }
from '@ngxs/form-plugin';
@NgModule({
imports: [
NgxsModule.forRoot([]),
NgxsFormPluginModule.forRoot(),
NgxsReduxDevtoolsPluginModule.forRoot()
]
})
export class AppModule {}
src/app.component.ts
Adding Forms Plugin
@State({
name: "app",
defaults: {
form: {
model: undefined,
dirty: false,
status: "",
errors: {}
}
}
})
export class AppState {}
src/app.component.ts
Adding initial form state
@Component({
selector: 'form',
template: `
<form ngxsForm="app.form" novalidate
[formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" formControlName="email" />
<button type="submit">Subscribe</button>
</form>`
})
export class FormComponent { }
src/app.component.ts
Tracking form changes
import { NgxsModule } from '@ngxs/store';
import { NgxsRouterPluginModule }
from '@ngxs/router-plugin';
@NgModule({
imports: [
NgxsModule.forRoot([]),
NgxsRouterPluginModule.forRoot()
]
})
export class AppModule {}
src/app.component.ts
Adding Router Plugin
Advanced NGXS
Todo App

Selectors
{
todos: [{ id: 1, text: 'todo 1', complete: false }],
currentFilter: "SHOW_ALL"
}
// Filtered Todos
[{ id: 1, text: 'todo 1', complete: false }]
src/app.component.ts
Example: Todos State Selector
{
todos: [{ id: 1, text: 'todo 1', complete: false }],
currentFilter: "SHOW_COMPLETED"
}
// Filtered Todos
[]
import { FilterState } from '../filter/filter.state';
@State<Todo[]>({ name: 'todos', defaults: [] })
export class TodosState {
@Selector([FilterState]) static todos(state, currentFilter) {
let t = state.slice().reverse();
switch (currentFilter) {
case 'SHOW_ACTIVE': return t.filter(t => !t.completed);
case 'SHOW_COMPLETED': return t.filter(t => t.completed);
case 'SHOW_ALL':
default: return t;
};
}
}
src/app.component.ts
Selector: Filtered Todos
Comparison
- v3.1.3 (3 months)
- 53 contributors
- Plugins
- 1K stars

- v6.0.1 (2 years)
- 119 contributors
- CLI integration
- 3K stars
More

Austin McDaniel
ngxs.io

Medium
Thanks


NGXS: Redux implemented in 2018
By Gerard Sans
NGXS: Redux implemented in 2018
In this talk, we are going to look into NGXS, a new State Management library released earlier this year. We will introduce its main concepts and cover all the good stuff up to v3.1 release: state/actions life cycle, advanced selectors, snapshots, plugins and more!
- 3,655