Where to initialise model objects within a redux / ngrx application architecture Where to initialise model objects within a redux / ngrx application architecture angular angular

Where to initialise model objects within a redux / ngrx application architecture


The easiest way to work with ngrx is to see it like a database, not just a javascript shared object cache. You would not store javascript helpers in the database, same for ngrx.

You can either stop using model functions and instead use utility methods when needed, or you can wrap the selector results using an observable operator. Something like state.pipe(select(mySelector), myWrapFunction) though you will end up re-creating your wrapper every time.

You might want to look at the viewmodel design pattern (e.g. [MVVM] (https://en.m.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)) to see approaches similar to what you are trying to do.


Check this example on how to initialize the state of a feature in the ngrx store. I hope this is what you are looking for.


@kyranjamie I'm trying to understand how to do in best-practice way. Did I understand you correct? You store a plain object in a state. When a component needs the object from the state it uses a service, for example:HomeService - to get HomeModel object instead of a plain object

@Injectable({  providedIn: 'root'})export class HomeService {  constructor() {  }  public getSelectedHome(homeObject: HomeJSON) {    return Object.assign(new HomeModel(), homeObject);  }}

A component needs to subscribe to the state. It's subscribed to a change in the state, but instead of using directly the state plain object, it uses HomeService to make the plain object into a class object(HomeModel).

ngOnInit() {    this.store.pipe(select(getSelectedHome)).subscribe(      home => {        this.home = this.homeService.getSelectedHome(home);      }    );  }

Is this how you do it?