rx-flux is state manager inspired by flux
- One immutable state
- Simple action for state updateting
- Support Angular routing resolvers
- Access for store by obervables
npm install -S rx-flux
import { RxFluxModule } from 'rx-flux';
@NgModule({
...
imports: [
...,
RxFluxModule
]
...
})
export class AppModule { }
export interface IApplicationState {
title?: string
}
import { StateManagerService } from 'rx-flux';
...
constructor(private state: StateManagerService<IApplicationState>) {
}
...
ngOnInit() {
this.state.initState({});
}
...
export class AppComponent {
title$ = this.state.listen(x => x.title);
}
// or
export class AppComponent {
title$ = this.state.chain().safeGet('title').asObservable();
}
this.state.update((prevState, delta) => {
return {
...prevState,
title: delta
};
}, 'Hello');
// or
this.state.chain().safeGet('title').safeSet('Hello');
export interface IAboutState {
text: string;
name: string;
}
@Injectable()
export class AboutResolverService extends StateResolver<IAboutState> {
constructor(protected stateManager: StateManagerService<IAboutState>) {
super(stateManager);
}
nextState(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Partial<IAboutState> {
return {
text: 'Helo',
name: of('Alexander')
}
}
}
RouterModule.forChild([{
path: '',
component: AboutComponent,
resolve: {
state: AboutResolverService
}
}])
export class AboutComponent implements OnInit {
constructor(private state: StateManagerService<IAboutState>) {
}
text$:Observable<string> = this.state.chain().safeGet('text').asObservable();
name$:Observable<string> = this.state.chain().safeGet('name').asObservable();
ngOnInit() {
}
}