A State Management Pattern - That Could Replace NGRX with Better Configurability

export class TreeNode<T>{
    data?: T
    children?: Map<string, TreeNode<Partial<T>>> | null
}

// type Inside<P, T> = T extends P ? P : undefined;

export class StateTree<K> implements TreeNode<K>{

    data:K = {} as K;
    children:Map<string, StateTree<Partial<K>>> = new Map();

    constructor(){}

    protected addNode<ModelType>(stateName:string, stateData:ModelType){
        const newState = new StateTree<ModelType>();
        newState.data = stateData;

        this.children.set(stateName, newState);
    }

    public findChild(childStateName:string){
        return this.children.get(childStateName);
    }

    public getChild(childStateName:string){
        return this.children.get(childStateName)!;
    }

    public setState(data:K | Partial<K>){
        this.data = {...this.data, ...data};
    }

    public setNode(name:string, state:Partial<K>){
        this.addNode<Partial<K>>(name, state);
    }

}

StmgmtPattern

This project was generated with Angular CLI version 11.0.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.