Reactive mit Angular und Android

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

Counter hat sich geändert: 0
Counter hat sich geändert: 1

4
9

Hallo, Candice!
Hallo, Oleg!

Hallo, Candice!
Hallo, Oleg!

import {Todo} from "./todo";
import {signal} from "@angular/core";

export interface Model {
  readonly firstName: string
  readonly lastName: string
  readonly todos: Todo[]
  readonly todosLoaded: boolean;
}

export const initial: Model =
{
  firstName: "Candice",
  lastName: "Oleg",
  todos: [],
  todosLoaded: false
}
export const store = signal<Model>(initial); (1)

import { Injectable } from '@angular/core';
import { store } from '../model';

@Injectable({
  providedIn: 'root'
})
export class StoreService {

  constructor() { }
  get store () {
    return store
  }
}

import { Injectable, signal, computed, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Model, Todo } from '../model';
import { initial } from '../model/model';
import {StoreService} from "./store.service";

@Injectable({
  providedIn: 'root',
})
export class AppStateService {
  private readonly API_URL = 'https://jsonplaceholder.typicode.com/todos?_limit=20';

  // Single Source of Truth als Signal
  (1)
  private state = inject(StoreService).store

  // Computed Signals für Selektoren
  (2)
  readonly todosSignals = computed(() => this.state().todos);
  readonly firstName = computed(() => this.state().firstName);
  readonly lastName = computed(() => this.state().lastName);

  constructor(private http: HttpClient) {}

  // Zustand aktualisieren
  (3)
  updateState(recipe: (state: Model) => Model) {
    this.state.update(recipe);
  }

  addTodo(todo: Todo) {
    this.updateState((state) => ({
      ...state,
      todos: [...state.todos, todo],
    }));
  }

  toggleTodoStatus(id: number) {
    this.updateState((state) => ({
      ...state,
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    }));
  }

  removeTodo(id: number) {
    this.updateState((state) => ({
      ...state,
      todos: state.todos.filter((todo) => todo.id !== id),
    }));
  }

  loadTodos() {
    if (!this.state().todosLoaded) {
      this.http
        .get<Todo[]>(this.API_URL)
        .subscribe((todos) => {
          this.updateState((state) => ({
            ...state,
            todos,
            todosLoaded: true,
          }));
        });
    }
  }
}

import {Component, OnInit} from '@angular/core';
import { AppStateService } from '../../services/app-state.service';
import { FormsModule } from '@angular/forms';
import { NgForOf } from '@angular/common';

@Component({
  selector: 'app-signal',
  templateUrl: './signal.component.html',
  styleUrls: ['./signal.component.css'],
  imports: [
    FormsModule,
    NgForOf,
  ],
})
export class SignalComponent implements OnInit{
  newTodoTitle = '';
  todos = this.appState.todosSignals;

  constructor(private appState: AppStateService) {}

  ngOnInit() {
    this.appState.loadTodos();
  }
  addTodo() {
    if (this.newTodoTitle.trim()) {
      this.appState.addTodo({
        userId: 1,
        id: Date.now(),
        title: this.newTodoTitle.trim(),
        completed: false,
      });
      this.newTodoTitle = '';
    }
  }

  toggleTodoStatus(id: number) {
    this.appState.toggleTodoStatus(id);
  }

  deleteTodo(id: number) {
    this.appState.removeTodo(id);
  }
}

package at.htl.leonding.util.immer;

import android.os.Handler;
import android.os.Looper;
import android.util.Log;

import java.util.concurrent.CompletableFuture;
import java.util.function.Consumer;

import at.htl.leonding.util.mapper.Mapper;
import io.reactivex.rxjava3.subjects.BehaviorSubject;

/** Immer simplifies handling immutable data structures.
 * @param <T> The type of the baseState
 */

public class Immer<T> {
    private static final String TAG = Immer.class.getSimpleName();
    final public Mapper<T> mapper; (1)
    final Handler handler; (2)

    public Immer(Class<? extends T> type) {
        mapper = new Mapper<T>(type);
        handler = new Handler(Looper.getMainLooper());
    }
    /** Create a deep clone of the existing model, apply a recipe to it and finally pass the new state to the consumer.
     * To reduce the load on the main thread we clone the current state in a separate thread.
     * To avoid multithreading issues we call back the recipe and resultConsumer running on the one and only Main thread of the app.
     * We do not call the resultConsumer if the clone equals the currentState,
     * @param pipe the previous readonly single source or truth
     * @param recipe the callback function that modifies parts of the cloned state
     * @param resultConsumer the callback function that uses the cloned & modified model
     */
// Immer.java
    (3)
    public void produce(BehaviorSubject<T> pipe, Consumer<T> recipe, Consumer<T> resultConsumer) {
        handler.post(() -> {
            var t = mapper.clone(pipe.getValue());
            var currentAsJson = mapper.toResource(t);
            recipe.accept(t);
            var nextAsJson = mapper.toResource(t);
            if (!nextAsJson.equals(currentAsJson)) {
                Log.d(TAG, String.format("=== state changed ===\n%s\n=>\n%s---", currentAsJson, nextAsJson));
                resultConsumer.accept(t);
            } else {
                Log.w(TAG, "produce() without change");
            }
        });
    }
}

package at.htl.leonding.util.store;

import android.util.Log;

import java.util.concurrent.CompletionException;
import java.util.function.Consumer;

import at.htl.leonding.util.immer.Immer;
import io.reactivex.rxjava3.subjects.BehaviorSubject;

/** Base class for implementations using a single source of truth approach.
 * @param <T> the class of the ReadOnly Single Source of Truth.
 */
public class StoreBase<T> {
    public final BehaviorSubject<T> pipe;
    protected final Immer<T> immer;

    protected StoreBase(Class<? extends T> type, T initialState) {
        try {
            pipe = BehaviorSubject.createDefault(initialState);
            immer = new Immer<T>(type);
        } catch (Exception e) {
            throw new CompletionException(e);
        }
    }

    public T get() {
        return immer.mapper.clone(pipe.getValue());
    }
    /** clone the current Model, apply the recipe to it and submit it to the pipe as the next Model.
     * @param recipe
     * The function that receives a clone of the current model and applies its changes to it.
     */
    public void apply(Consumer<T> recipe) { (1)
        Consumer<T> onNext = nextState -> pipe.onNext(nextState);
        immer.produce(pipe, recipe, onNext);
    }
}

package at.htl.leonding.model;

/** Our read only <a href="https://redux.js.org/understanding/thinking-in-redux/three-principles">single source of truth</a> model */
public class Model {
    public static class GreetingModel {
        public String greetingText = "Hello, world!";
    }
    public ToDo[] toDos = new ToDo[0];
    public UIState uiState = new UIState();  // sub-model für ui state
    public GreetingModel greetingModel = new GreetingModel();
}

package at.htl.leonding.model;

import javax.inject.Inject;
import javax.inject.Singleton;

import at.htl.leonding.util.store.StoreBase;

/** This is our Storage area for our <a href="https://redux.js.org/understanding/thinking-in-redux/three-principles">single source of truth</a> {@link Model}. */
@Singleton
public class Store extends StoreBase<Model> {
    @Inject
    public Store() {
        super(Model.class, new Model());
    }
}