@rss-state-store 🚀

A lightweight and reactive library for state management in Angular 13+, focused on automatic persistence and simplicity.

📋 Features

• Reactivity with RxJS: Based on ReplaySubject to ensure new subscribers receive the latest state.
• Automatic Persistence: Native support for localStorage and sessionStorage.
• Key Prefixing: Prevents data collision between different applications or modules.
• Fully Typed: Developed in TypeScript for maximum compile-time safety.
• Tested with Vitest: High performance and reliability in unit tests.

⚙️ Installation (Local Usage)

In your main project, import via the path mapped in tsconfig.json:

import { StateStoreService } from 'rss-state-store';

🚀 How to Use

1. Define Your State Model

Create an interface that represents the data you want to store.

export interface UserSettings {
  theme: 'light' | 'dark';
  username: string;
  notificationsEnabled: boolean;
}

2. Create Your Store

Extend the StateStoreService class and implement the initialState() method.

import { Injectable } from '@angular/core';
import { StateStoreService } from 'rss-state-store';

@Injectable({ providedIn: 'root' })
export class UserSettingsStore extends StateStoreService<UserSettings> {
  constructor() {
    super('rss-app', 'user-settings', { useLocalStorage: true });
  }

  public override initialState(): UserSettings {
    return {
      theme: 'light',
      username: 'Guest',
      notificationsEnabled: true
    };
  }

  // Custom methods for your business logic
  public toggleTheme(): void {
    const newTheme = this.getState().theme === 'light' ? 'dark' : 'light';
    this.updatePartialState({ theme: newTheme });
  }
}

3. Use in a Component

Use Angular's new Control Flow (@if) and the async pipe.

@if (settingsStore.state$ | async; as settings) {
  <div [class.dark]="settings.theme === 'dark'">
    <h1>Hello, {{ settings.username }}!</h1>
    <button (click)="settingsStore.toggleTheme()">Toggle Theme</button>
  </div>
}

🛠️ Main API

StateStoreService<T>

| Method | Description | | :--- | :--- | | state$ | Observable that reactively emits the current state. | | getState() | Returns a synchronous snapshot of the current state. | | updateState(newState) | Replaces the entire state. | | updatePartialState(partial) | Merges the current state with new properties (Merge). | | resetState() | Resets the store to the value defined in initialState. | | setCustomKey(key) | Dynamically changes the persistence key (e.g., user ID). |