Actual: https://github.com/Angular-RU/angular-ru-sdk/tree/master/libs/ngxs
ngxs-labs / data Goto Github PK
View Code? Open in Web Editor NEWNGXS Persistence API
Home Page: https://ngxs-labs.github.io/data
NGXS Persistence API
Home Page: https://ngxs-labs.github.io/data
Guys, do you have any plans to add support for IE11 (at least)?
I would love to use this in my project, but we have to support IE (unfortunately). Will IE 10 / 11 ever be supported?
Also, do you have a roadmap for this lib? About when can we expect it to be prod ready? The labs page says it's "stable".
Hi, I am trying to follow the example at https://github.com/ngxs-labs/data. However, I am using an explicit typescript class as a payload, and having difficulties in what to return from the action. I would like your help in what should be return in the addAddress and updateAddress actions
import { action, Immutable, NgxsDataRepository, query } from '@ngxs-labs/data'
import { Observable } from 'rxjs'
export interface IFormState {
dirty?: boolean
model?: any
}
export class FormState {
dirty?: boolean = false
model?: any = undefined
}
export interface IRegistrationStateModel {
address: IFormState
}
export class RegistrationStateModel {
address = new FormState()
}
export class RegistrationState extends NgxsDataRepository<IRegistrationStateModel>{
@query<IRegistrationStateModel, IFormState>((state) => state.address)
public address$: Observable<IFormState>
@action() addAddress():Immutable<IRegistrationStateModel>{
return this.ctx.setState((state: Immutable<IRegistrationStateModel>) => address: state.address)
}
@action() updatedAddress():Immutable<IRegistrationStateModel>{
return
}
}
/* DescriptionState, DescriptionSimilarState */
interface DescriptionModel {
name: string;
description: string;
}
export class UpdateDescriptionState {
public static type = 'UpdateDescriptionState ';
constuctor(public name: string, public description: string) { }
}
@State<DescriptionModel>({
name: 'myState',
defaults: { name: null, description: null }
})
class DescriptionState {
@Action(UpdateDescriptionState)
public updateState(ctx: StateContext, { name, description }: UpdateMyState) {
ctx.setState({ name, description });
}
}
@State<DescriptionModel>({
name: 'myAnotherState',
defaults: { name: null, description: null }
})
class DescriptionSimilarState {
@Action(UpdateDescriptionState)
public updateAlsoState(ctx: StateContext, { name, description }: UpdateMyState) {
ctx.setState({ name, description });
}
}
class AppComponent {
constuctor(private store: Store) {}
public ngOnInit() {
// event to DescriptionState, DescriptionSimilarState
this.store.dispatch(new UpdateDescriptionState('Name', 'Description'));
}
}
Before
After
import { EntityState, EntityRepository } from '@ngxs-labs/data';
@EntityState<MyModel>({
name: 'myState',
defaults: { name: null, description: null }
})
class MyStateRepository extends EntityRepository<MyModel> {
}
@EntityState<MyModel>({ name: 'myAnotherState' })
class MyAnotherSimilarStateRepository extends MyStateRepository {
}
class AppComponent {
constructor(
private myState: MyStateRepository,
private similarMyState: MyAnotherSimilarStateRepository
) {}
public ngOnInit() {
this.myState.setState('Name', 'Description');
this.similarMyState.setState('Name', 'Description');
}
}
We recently switched from ngrx to nxgs with an app that heavily used ngrx/data. Right now we are trying to automate crud operations with our api in a similar way we did with ngrx/data. The route we've chosen is to extend NgxsDataEntityCollectionsRepository to include getAll
getOne
etc. for now.
Just to share what we are experiencing so far: If we are adding custom fields to the NgxsDataEntityCollectionsRepository reducer, we need to override get snapshot()
and getState()
. It'd be very nice, if there could be a third generic allowing to specify a type for the NgxsEntityCollections
.
how to set the time dynamically? or is it possible?
Is there any event to listen for the time expiration so that we can refresh the data?
Hi,
I am getting the following error when using the operator updateItem
with data-plugin "@ngxs-labs/data": "^2.4.1" and above,
I don't know if this problem comes with other operators as well.
Thank you
TypeError: Cannot convert undefined or null to object
Hi, in your example, to register the NgxsDataPluginModule in the app module the following is used:
...
NgxsDataPluginModule.forRoot({ factory: StateFactory, context: StateContextFactory })
...
How do I accomplish same in a non-app module - there is no NgxsDataPluginModule.forChild() or NgxsDataPluginModule.forFeature() (as is present in NgxsModule.forFeature())
Is there a suggested way of selecting a slice of the state?
I'm not able to set state in a resolver. Any tips to how to do it? Current i have the following code:
Service:
@Injectable()
export class HomeService {
constructor(
private readonly urlService: HttpUrlService,
private readonly httpService: HttpClient
) { }
public fetchAll() {
const url = this.urlService.get('HOME.FETCH');
return this.httpService.get<{data: HomeModel}>(url).pipe(
map(response => response.data)
);
}
}
State:
@StateRepository()
@State<HomeModel>({
name: 'home',
defaults: {
title: null,
description: null
}
})
@Injectable()
export class HomeState extends NgxsDataRepository<HomeModel> {
@Select(state => state.home)
public home$: Observable<HomeModel>;
constructor(
private readonly homeService: HomeService
) {
super();
}
@action()
public getContent() {
// this does a httpClient.get()
return this.homeService.fetchAll().pipe(
tap(content => this.ctx.setState(() => content ))
);
}
}
Then in resolver:
@Injectable()
export class HomeResolver implements Resolve<any> {
constructor(
private homeState: HomeState
) { }
public resolve() {
return this.homeState.getContent();
}
}
But checking redux tools there is no diff in the state:
I'm only able if i explicity .subscribe() the observable, but with that i loose the purpose of a resolver.
On other hand, use it normally as async bind in the view i get the data from the request:
@Component({
selector: 'ng-lab-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
home$: Observable<HomeModel>;
constructor(
private readonly homeState: HomeState
) {}
ngOnInit() {
this.home$ = this.homeState.home$;
}
}
<div class="ui-hero" *ngIf="(home$ | async) as home">
<h1 class="ui-hero__title">{{home.title}}</h1>
<p class="ui-hero__info">{{home.description}}</p>
</div>
So i'm a bit confuse because i set state with .setState() and i don't see the data in the state (redux devtools), but using as normal observable data get's renderer in component, is like doesn't set anything related with state but throws data normally thru observables pipes.
"@ngxs-labs/data": "2.4.1",
<div>
<full-calendar
*ngIf="calendarState$ | async | mutable as calendarState"
#calendar
[plugins]="calendarState.plugins"
></full-calendar>
</div>
NgxsDataPluginModule
imported in my Store module.What am I missing?
I have actually no I idea how NPM read me work. But as of now it is showing wrong read me. And also there is github link one can follow. It would be great to have updated readme on npm page.
What's the right/most simple way to work with these objects?
Everything I select from my state is wrapped by them, and it really making hard working with my regular types/models.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. đđđ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google â¤ď¸ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.