600-angular-ngrx-signal-store

NGRx Signal Store Best Practices

• Creating Signal Stores: Use the createStore function from @ngrx/signals to create a signal store as part of the global state layer.

import { createStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, map, catchError } from 'rxjs';
import { inject } from '@angular/core';
import { tapResponse } from '@ngrx/operators';

export interface TodosState {
  todos: Todo[];
  status: 'idle' | 'loading' | 'error';
  error: string | null;
}

export const initialState: TodosState = {
  todos: [],
  status: 'idle',
  error: null
};

export const TodosStore = createStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ todos }) => ({
    completedTodos: computed(() => todos().filter(todo => todo.completed)),
    incompleteTodos: computed(() => todos().filter(todo => !todo.completed)),
    todoCount: computed(() => todos().length)
  })),
  withMethods((store, todosService = inject(TodosService)) => ({
    loadTodos: rxMethod(
      pipe(
        switchMap(() => {
          patchState(store, { status: 'loading', error: null });
          
          return todosService.getTodos().pipe(
            tapResponse(
              (todos) => patchState(store, { todos, status: 'idle' }),
              (error) => patchState(store, { 
                status: 'error', 
                error: error instanceof Error ? error.message : 'Unknown error' 
              })
            )
          );
        })
      )
    ),
    
    addTodo: (title: string) => {
      const newTodo: Todo = { 
        id: Date.now().toString(), 
        title, 
        completed: false 
      };
      
      patchState(store, ({ todos }) => ({
        todos: [...todos, newTodo]
      }));
    },
    
    removeTodo: (id: string) => {
      patchState(store, ({ todos }) => ({
        todos: todos.filter(todo => todo.id !== id)
      }));
    },
    
    toggleTodo: (id: string) => {
      patchState(store, ({ todos }) => ({
        todos: todos.map(todo =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        )
      }));
    }
  }))
);

• Store Methods Are Not Services: Methods in the store should focus on state updates only, not business logic.

// ❌ AVOID: Business logic in store methods
export const BadUserStore = createStore(
  { providedIn: 'root' },
  withState<UserState>(initialUserState),
  withMethods((store) => ({
    updateUser: (userData: UserUpdateDto) => {
      // Business validation doesn't belong in the store
      if (!userData.name || userData.name.length < 3) {
        throw new Error('Name must be at least 3 characters');
      }
      
      // Business transformations should be in services
      const formattedUser = {
        ...userData,
        name: userData.name.trim(),
        updatedAt: new Date().toISOString()
      };
      
      // The state update itself is appropriate
      patchState(store, { user: formattedUser });
    }
  }))
);

// ✅ GOOD: Store methods focused on state updates
export const GoodUserStore = createStore(
  { providedIn: 'root' },
  withState<UserState>(initialUserState),
  withMethods((store) => ({
    // Store methods should be simple state operations
    updateUser: (user: User) => {
      patchState(store, { user });
    },
    
    setLoading: (loading: boolean) => {
      patchState(store, { loading });
    },
    
    setError: (error: string | null) => {
      patchState(store, { error });
    }
  }))
);

// Services handle business logic before updating store
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private userStore: typeof GoodUserStore) {}
  
  updateUser(userData: UserUpdateDto): Observable<User> {
    // Business validation
    if (!userData.name || userData.name.length < 3) {
      return throwError(() => new Error('Name must be at least 3 characters'));
    }
    
    // Business transformation
    const updatedUser = {
      ...userData,
      name: userData.name.trim(),
      updatedAt: new Date().toISOString()
    };
    
    // Update loading state
    this.userStore.setLoading(true);
    
    // API call
    return this.http.put<User>(`/api/users/${userData.id}`, updatedUser).pipe(
      tap(user => {
        // State update happens after business logic
        this.userStore.updateUser(user);
        this.userStore.setLoading(false);
      }),
      catchError(error => {
        this.userStore.setError(error.message);
        this.userStore.setLoading(false);
        return throwError(() => error);
      })
    );
  }
}