feat(component-store): add ability for patchState to accept Observable

modules/component-store/spec/component-store.spec.ts

@@ -7,6 +7,7 @@ import {
   interval,
   timer,
   Observable,
+  from,
 } from 'rxjs';
 import {
   delayWhen,
@@ -15,6 +16,8 @@ import {
   map,
   tap,
   finalize,
+  delay,
+  concatMap,
 } from 'rxjs/operators';
 
 describe('Component Store', () => {
@@ -96,6 +99,19 @@ describe('Component Store', () => {
       );
     });
 
+    it('throws an Error when patchState with Observable is called before initialization', () => {
+      const componentStore = new ComponentStore();
+
+      expect(() => {
+        componentStore.patchState(of({ foo: 'bar' }));
+      }).toThrow(
+        new Error(
+          'ComponentStore has not been initialized yet. ' +
+            'Please make sure it is initialized before updating/getting.'
+        )
+      );
+    });
+
     it(
       'throws an Error when patchState with a function/callback is called' +
         ' before initialization',
@@ -566,6 +582,28 @@ describe('Component Store', () => {
       })
     );
 
+    it(
+      'with the values from Observable',
+      marbles((m) => {
+        componentStore.patchState(
+          from([
+            { value1: 'foo' },
+            { value2: { foo: 'foo2' } },
+            { value1: 'baz' },
+          ]).pipe(concatMap((partialState) => of(partialState).pipe(delay(3))))
+        );
+
+        m.expect(componentStore.state$).toBeObservable(
+          m.hot('a--b--c--d', {
+            a: INIT_STATE,
+            b: { ...INIT_STATE, value1: 'foo' },
+            c: { value1: 'foo', value2: { foo: 'foo2' } },
+            d: { value1: 'baz', value2: { foo: 'foo2' } },
+          })
+        );
+      })
+    );
+
     it(
       'with a value based on the previous state',
       marbles((m) => {

modules/component-store/src/component-store.ts

@@ -174,19 +174,20 @@ export class ComponentStore<T extends object> implements OnDestroy {
    * @throws Error if the state is not initialized.
    */
   patchState(
-    partialStateOrUpdaterFn: Partial<T> | ((state: T) => Partial<T>)
+    partialStateOrUpdaterFn:
+      | Partial<T>
+      | Observable<Partial<T>>
+      | ((state: T) => Partial<T>)
   ): void {
-    this.setState((state) => {
-      const patchedState =
-        typeof partialStateOrUpdaterFn === 'function'
-          ? partialStateOrUpdaterFn(state)
-          : partialStateOrUpdaterFn;
+    const patchedState =
+      typeof partialStateOrUpdaterFn === 'function'
+        ? partialStateOrUpdaterFn(this.get())
+        : partialStateOrUpdaterFn;
 
-      return {
-        ...state,
-        ...patchedState,
-      };
-    });
+    this.updater((state, partialState: Partial<T>) => ({
+      ...state,
+      ...partialState,
+    }))(patchedState);
   }
 
   protected get(): T;