Design Doc - @rx-angular/state

export class MyComponent {
   // Full object
   readonly state$ = this.state.select();
   // state slice
   readonly firstName$ = this.state.select('firstName');
   // nested state slice
   readonly firstName$ = this.state.select('user', 'firstname');
   // transformation
   readonly firstName$  this.state.select(map(s => s.firstName));
   // transformation, behaviour
   readonly firstName$ = this.state.select(map(s => s.firstName), debounceTime(1000));
  
   constructor(private state: RxState<{title: string}>) {
   }
}

export class MyComponent {
   readonly firstName$ = this.state.select(s => s.firstName);
 
   @Input() set user(user: {firstName: string, lastName: string}) {
       this.state.setState(user);
       // with previouse state
       this.state.setState(s => ({...user, firstName + s.otherSlice}));
   }
  
   constructor(private state: RxState<{title: string}>) {
   }
}

export class MyComponent {
   readonly messages$ = this.state.select(s => s.firstName);

   @Input() set messages(messages$) {
       // with single messages - Observable<string[]>
       this.state.connect('messages', message$);
       // with single messages - Observable<string>
       this.state.connect(messages$, => (s, m) => ({...s, messages: s.concat([m])}));
   }
  
   constructor(private state: RxState<{messages: string[]}>) {
   }
}

export class MyComponent {
   readonly userRoles$ = this.state.select(s => s.userRoles);
  
   constructor(private GlobalState: Store<{userRoles: string[], ...}>, 
               private state: RxState<{userRoles: string[]}>) {
            // the full global state
            this.state.connect(this.globalState);
            // The roles selection
            this.state.connect('userRoles', this.globalState.select(getUserRoles()));
            // The roles selection, with composition of the previous state
            this.state.connect('userRoles', this.globalState.select(getUserRoles()), (s, userRoles) => calculation(s, userRoles));
   }
}

export class MyComponent {
  
   constructor(private router: Router, 
               private state: RxState<{messages: string[]}>) {
        const paramChange$ = this.router.params;
        // Hold an already composed side effect
        this.state.hold(paramChange$.pipe(tap(params => this.runSideEffect(params))));
        // Hold and compose side effect
        this.state.hold(paramChange$, (params) => this.runSideEffect(params));
   }
}

export class MyComponent {
  
   readonly users$ = this.$.select(s => s.users);
   readonly loading$ = this.$.select(s => s.loading);
  
   constructor(private router: Router, 
               private userService: UserService, 
               private $: RxState<{user: User, loading: boolean}>) {
            
     const fetchUserOnUrlChange$ = this.router.params.pipe(
        switchMap(p => this.userService.getUser(p.user).pipe(
          	map(res => ({user: res.user})),
            startWith({loading: true}),
            endWith({loading: false})
        ))
    );
    this.$.connect(userFetch$);
        
   }
}

export class RxState<T extends object> implements Subscribable<any> {
  subscription = new Subscription();

  effectSubject = new Subject<Observable<Partial<T>>>();
  
  state
  stateObservables = new Subject<Observable<Partial<T>>>();
  stateSlices = new Subject<Partial<T>>();
  stateAccumulator: (st: T, sl: Partial<T>) => T = (
    st: T,
    sl: Partial<T>
  ): T => {
    return { ...st, ...sl };
  }

  $ = merge(
      this.stateObservables.pipe(
      this.distinctUntilChanged(),
        mergeAll(),
        observeOn(queueScheduler)
      ),
      this.stateSlices.pipe(observeOn(queueScheduler))
    ).pipe(
      scan(this.stateAccumulator, {} as T),
      tap(newState => (this.state = newState)),
      publishReplay(1)
    );

  constructor() {}

  getState(): T {
    return this.state;
  }

  
  setState<K extends keyof T>(
    projectState: ProjectStateFn<T> | K
  ): void {
      this.nextSlice(
        projectState(this.state)
      );
  }
 
  connect<K extends keyof T>(
    slice$: Observable<any | Partial<T>>,
    projectFn: ProjectStateReducer<T, K>
  ): void {
      const project = projectOrSlices$;
      const slice$ = keyOrSlice$.pipe(
        filter(slice => slice !== undefined),
        map(v => project(this.getState(), v))
      );
      this.accumulationObservable.nextSliceObservable(slice$);
  }

  select<R>(
    ...opOrMapFn: OperatorFunction<T, R>[] | string[]
  ): Observable<T | R> {
    if (!opOrMapFn || opOrMapFn.length === 0) {
      return this.$.pipe(stateful());
    } else if (isStringArrayGuard(opOrMapFn)) {
      return this.$.pipe(stateful(pluck(...opOrMapFn)));
    } else if (isOperateFnArrayGuard(opOrMapFn)) {
      return this.$.pipe(stateful(pipeFromArray(opOrMapFn)));
    }
    throw new WrongSelectParamsError();
  }

  hold<S>(
    obsOrObsWithSideEffect: Observable<S>,
    sideEffectFn?: (arg: S) => void
  ): void {
    if (sideEffectFn) {
      this.effectSubject.next(
        obsOrObsWithSideEffect.pipe(tap(sideEffectFn))
      );
      return;
    }
    this.effectSubject.next(obsOrObsWithSideEffect);
  }

  subscribe(): Unsubscribable {
    const subscription = new Subscription();
    subscription.add(this.$.subscribe());
    subscription.add(this.effectSubject.subscribe());
    return subscription;
  }
  
}