900-angular-store

Angular Store Architecture and State Management

• Store Structure: Create stores as injectable services with signals for state.

@Injectable({
  providedIn: 'root'
})
export class ProductStore {
  // Private writable signals
  private _products = signal<Product[]>([]);
  private _selectedProductId = signal<string | null>(null);
  private _loading = signal<boolean>(false);
  private _error = signal<string | null>(null);
  
  // Public read-only signals 
  public products = this._products.asReadonly();
  public selectedProductId = this._selectedProductId.asReadonly();
  public loading = this._loading.asReadonly();
  public error = this._error.asReadonly();
  
  // Computed signals for derived state
  public selectedProduct = computed(() => {
    const id = this._selectedProductId();
    return id ? this._products().find(p => p.id === id) || null : null;
  });
  
  public productsByCategory = computed(() => {
    const products = this._products();
    return products.reduce((acc, product) => {
      const category = product.category;
      if (!acc[category]) {
        acc[category] = [];
      }
      acc[category].push(product);
      return acc;
    }, {} as Record<string, Product[]>);
  });
  
  // Public methods for state updates
  setProducts(products: Product[]) {
    this._products.set(products);
  }
  
  setSelectedProductId(id: string | null) {
    this._selectedProductId.set(id);
  }
  
  setLoading(isLoading: boolean) {
    this._loading.set(isLoading);
  }
  
  setError(error: string | null) {
    this._error.set(error);
  }
  
  addProduct(product: Product) {
    this._products.update(products => [...products, product]);
  }
  
  updateProduct(updatedProduct: Product) {
    this._products.update(products => 
      products.map(p => p.id === updatedProduct.id ? updatedProduct : p)
    );
  }
  
  removeProduct(productId: string) {
    this._products.update(products => 
      products.filter(p => p.id !== productId)
    );
  }
}

• State Normalization: Store data in a normalized form to avoid duplication and improve management.

@Injectable({
  providedIn: 'root'
})
export class UserStore {
  // Bad approach: nested data structure
  // private _userData = signal<{
  //   user: User,
  //   orders: Order[],
  //   addresses: Address[]
  // } | null>(null);
  
  // Good approach: normalized data
  private _user = signal<User | null>(null);
  private _orders = signal<Record<string, Order>>({});
  private _addresses = signal<Record<string, Address>>({});
  
  // Public read-only signals
  public user = this._user.asReadonly();
  public orders = this._orders.asReadonly();
  public addresses = this._addresses.asReadonly();
  
  // Computed signals for derived state
  public userOrders = computed(() => {
    const user = this._user();
    const orders = this._orders();
    if (!user) return [];
    
    return user.orderIds
      .map(id => orders[id])
      .filter(Boolean);
  });
  
  public userAddresses = computed(() => {
    const user = this._user();
    const addresses = this._addresses();
    if (!user) return [];
    
    return user.addressIds
      .map(id => addresses[id])
      .filter(Boolean);
  });
  
  // Set methods
  setUser(user: User | null) {
    this._user.set(user);
  }
  
  // Entities management methods
  addOrder(order: Order) {
    this._orders.update(orders => ({
      ...orders,
      [order.id]: order
    }));
    
    // Update user's orderIds if necessary
    if (this._user()) {
      this._user.update(user => {
        if (!user) return user;
        
        if (!user.orderIds.includes(order.id)) {
          return {
            ...user,
            orderIds: [...user.orderIds, order.id]
          };
        }
        
        return user;
      });
    }
  }
  
  addAddress(address: Address) {
    this._addresses.update(addresses => ({
      ...addresses,
      [address.id]: address
    }));
    
    if (this._user()) {
      this._user.update(user => {
        if (!user) return user;
        
        if (!user.addressIds.includes(address.id)) {
          return {
            ...user,
            addressIds: [...user.addressIds, address.id]
          };
        }
        
        return user;
      });
    }
  }
}