angular-best-practices-ngrx

Enforce NgRx best practices for reducers, effects, selectors, and entity adapters.

Updated Aug 24, 2022

Search Tags:#angular #state-management #reducers #effects #selectors #ngrx #entity-adapter

Ready to run

npx skills add https://github.com/cillies-finatix/todo-angular-with-best-practices --skill angular-best-practices-ngrx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-best-practices-ngrx
Source: https://github.com/cillies-finatix/todo-angular-with-best-practices/tree/main/.agents/skills/angular-best-practices-ngrx
Command: npx skills add https://github.com/cillies-finatix/todo-angular-with-best-practices --skill angular-best-practices-ngrx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides concrete guidelines to prevent common NgRx pitfalls that lead to unpredictable global state, untestable logic, and performance regressions in Angular applications.

Core Features & Use Cases

Pure Reducers: Ensure reducers remain deterministic and free of side effects so state transitions are predictable and testable.
Feature Selectors & Memoization: Promote createFeatureSelector and createSelector usage to optimize component rendering and avoid unnecessary recomputations.
Effects & Entity Management: Guide placement of side effects in Effects and recommend @ngrx/entity for collection handling to simplify CRUD flows.
Use Case: Apply when adding or refactoring NgRx stores, creating selectors for components, or managing large collections with entity adapters.

Quick Start

Use angular-best-practices-ngrx to review and refactor NgRx reducers, effects, and selectors in the current Angular project.

Frequently Asked Questions about angular-best-practices-ngrx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce pure reducers in NgRx to prevent unpredictable state transitions?▼

To enforce pure NgRx reducers, keep state transition functions deterministic and free of side effects. This ensures predictable state updates and makes your reducer logic completely testable across your Angular application.

What is the best way to optimize Angular component rendering using NgRx selectors?▼

The best way to optimize Angular rendering with NgRx selectors is using createFeatureSelector and createSelector. Memoized feature selectors prevent unnecessary recomputations, significantly improving component performance during state changes.

When do I need @ngrx/entity for managing collections in an Angular store?▼

You need @ngrx/entity when managing large collections in your Angular store. Entity adapters simplify CRUD flows by handling sorted and indexed collections, reducing boilerplate code for standard state updates.

Where should I place side effects in an NgRx state management architecture?▼

Side effects in NgRx state management belong in Effects classes, not reducers. Effect-driven side effects isolate asynchronous operations from pure state transitions, keeping your Angular store logic predictable and testable.

Can I use this approach to refactor existing NgRx stores and effects in my Angular project?▼

Yes, you can apply these NgRx patterns to refactor existing stores, selectors, and effects in Angular projects. This process reviews and updates your current implementation to satisfy best practice requirements for pure reducers and memoized selectors.

What are common NgRx pitfalls that lead to performance regressions in Angular applications?▼

Common NgRx pitfalls causing performance regressions include impure reducers with side effects and non-memoized selectors. These issues lead to unpredictable global state and unnecessary component recomputations during rendering.