refactor(mini-rx-angular-demo): Minors

apps/mini-rx-angular-demo/src/app/modules/counter/counter-shell/counter-shell.component.html

@@ -2,7 +2,7 @@
     <div class="m-3 alert alert-info d-flex align-items-center" role="alert">
         <i class="info-icon bi bi-info-circle-fill"></i>
         The counter components use "Local Component State": The counter states are removed from the
-        global state object when the components are destroyed
+        global state object when the components are destroyed.
     </div>
 
     <div class="d-flex justify-content-between p-5">

apps/mini-rx-angular-demo/src/app/modules/products/state/products.reducer.ts

@@ -40,6 +40,7 @@ const initialState: ProductState = {
     ],
 };
 
+// REDUCER
 export const productsReducer = reducer<ProductState>(
     initialState,
     on(toggleProductCode, (state, { payload }) => ({ ...state, showProductCode: payload })),

apps/mini-rx-angular-demo/src/app/modules/todos/state/todos-store.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Todo } from '../../todos-shared/models/todo';
 import { TodoFilter } from '../../todos-shared/models/todo-filter';
-import { Observable } from 'rxjs';
+import { Observable, pipe } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
 import {
@@ -103,9 +103,9 @@ export class TodosStore extends FeatureStore<TodosState> {
     }
 
     // API CALLS...
-    // ...with effect
-    load = this.effect((trigger$) => {
-        return trigger$.pipe(
+    // Effect using the RxJS standalone pipe
+    load = this.effect<void>(
+        pipe(
             mergeMap(() =>
                 this.apiService.getTodos().pipe(
                     tapResponse(
@@ -116,25 +116,25 @@ export class TodosStore extends FeatureStore<TodosState> {
                     )
                 )
             )
-        );
-    });
+        )
+    );
 
-    // ... with effect (and optimistic update / undo)
+    // Effect + optimistic update / undo
+    // We can skip the standalone pipe when using just one RxJS operator
     create = this.effect<Todo>(
-        // FYI: we can skip the payload$.pipe when using just one RxJS operator
         mergeMap((todo) => {
             const optimisticUpdate: Action = this.setState((state) => {
                 // Create a new Todo object to prevent the Immutable Extension from making the current form model immutable
-                // This is only a concern if the create call fails (which would return a new Todo object)
+                // This is only a concern if the create call fails (A successful create call would return a new Todo object)
                 const newTodo: Todo = { ...todo };
                 return {
                     todos: [...state.todos, newTodo],
                 };
             }, 'createOptimistic');
 
             return this.apiService.createTodo(todo).pipe(
-                tapResponse({
-                    next: (createdTodo) => {
+                tapResponse(
+                    (createdTodo) => {
                         this.setState(
                             (state) => ({
                                 todos: state.todos.map((item) =>
@@ -145,16 +145,16 @@ export class TodosStore extends FeatureStore<TodosState> {
                             'createSuccess'
                         );
                     },
-                    error: (err) => {
+                    (err) => {
                         console.error(err);
                         this.undo(optimisticUpdate);
-                    },
-                })
+                    }
+                )
             );
         })
     );
 
-    // ...with subscribe (and optimistic update / undo)
+    // Classic subscribe + optimistic update / undo
     update(todo: Todo) {
         const optimisticUpdate: Action = this.setState(
             (state) => ({
@@ -179,7 +179,7 @@ export class TodosStore extends FeatureStore<TodosState> {
         });
     }
 
-    // ...with subscribe (and optimistic update / undo)
+    // Classic subscribe + optimistic update / undo
     delete(todo: Todo) {
         const optimisticUpdate: Action = this.setState(
             (state) => ({