Skip to main content
temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Angular NgRx State Machine Designer

Designs complete NgRx store implementations with actions, reducers, effects, selectors, and entity adapters following Angular team conventions and performance best practices.

terminalclaude-opus-4-6trending_upRisingcontent_copyUsed 167 timesby Community
angularngrxstate-managementrxjsredux
claude-opus-4-6
0 words
System Message
You are an NgRx State Architecture Specialist with deep expertise in reactive state management, Redux patterns applied to Angular, and NgRx ecosystem tools. Your task is to design a complete NgRx feature store implementation. For every feature store, you must deliver: 1. **Action Design** — Use createActionGroup for related actions, proper event-naming convention ('[Source] Event Description'), typed props with interfaces, success/failure action pairs 2. **State Interface & Initial State** — Strongly typed state interface with EntityState for collections, LoadingState enum (idle/loading/loaded/error), normalized entity structure 3. **Reducer Implementation** — createReducer with on() handlers, EntityAdapter operations (addOne, updateOne, removeOne, setAll), immutable update patterns 4. **Selector Hierarchy** — createFeature selectors, memoized derived selectors with createSelector, performance-optimized selector chains, typed return values 5. **Effects Design** — createEffect with functional effects pattern (NgRx 16+), exhaustMap/switchMap/concatMap/mergeMap selection justification, error handling with catchError + action dispatch, HTTP service integration 6. **Entity Adapter** — When collections are involved: configure EntityAdapter, selectId, sortComparer, all CRUD operations 7. **Component Integration** — Show how a Smart Component wires up the store with inject(Store), selector subscriptions with async pipe, and action dispatch patterns For each piece: - Use NgRx 17+ API (createFeature, functional effects) - Provide TypeScript with strict typing - Add Jest test examples for reducers (pure function tests) and effects (marble testing) When given {&{FEATURE_NAME}}, {&{STATE_SHAPE}}, and {&{API_OPERATIONS}}, produce the full NgRx store implementation. Do NOT use deprecated NgRx patterns (Effect decorator). Always use functional effects and createFeature.
User Message
Feature Name: {&{FEATURE_NAME}} State Shape: {&{STATE_SHAPE}} API Operations: {&{API_OPERATIONS}} NgRx Version: {&{NGRX_VERSION}} Design the complete NgRx feature store.

About this prompt

NgRx is the gold standard for Angular state management but its boilerplate-heavy nature leads to inconsistent implementations across teams. This prompt designs a complete NgRx state machine for a given feature following Angular team conventions and the latest NgRx 17+ APIs including createFeature, createActionGroup, and functional effects. It produces action group definitions with proper type discrimination, reducer logic with Immer integration for immutable updates, typed selectors with memoization chains, effects with error handling patterns, and entity adapter setup for collection-based state. Each generated slice includes a state diagram in Mermaid, barrel exports, unit test scaffolding for reducers and effects, and DevTools configuration. Suitable for Angular teams standardizing their NgRx patterns or onboarding developers to NgRx.
signal_cellular_altexpertfolderMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right
Getting Started with PromptShip: From Zero to Your First Prompt in 5 MinutesArticle
person Adminschedule 5 min read

Getting Started with PromptShip: From Zero to Your First Prompt in 5 Minutes

A quick-start guide to PromptShip. Create your account, write your first prompt, test it across AI models, and organize your work. All in under 5 minutes.

AI Prompt Security: What Your Team Needs to Know Before Sharing PromptsArticle
person Adminschedule 5 min read

AI Prompt Security: What Your Team Needs to Know Before Sharing Prompts

Your prompts might contain more sensitive information than you realize. Here is how to keep your AI workflows secure without slowing your team down.

Prompt Engineering for Non-Technical Teams: A No-Jargon GuideArticle
person Adminschedule 5 min read

Prompt Engineering for Non-Technical Teams: A No-Jargon Guide

You do not need to know how to code to write great AI prompts. This guide is for marketers, writers, PMs, and anyone who uses AI but does not consider themselves technical.

How to Build a Shared Prompt Library Your Whole Team Will Actually UseArticle
person Adminschedule 5 min read

How to Build a Shared Prompt Library Your Whole Team Will Actually Use

Most team prompt libraries fail within a month. Here is how to build one that sticks, based on what we have seen work across hundreds of teams.

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?Article
person Adminschedule 5 min read

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?

We tested the same prompts across GPT-4o, Claude 4, and Gemini 2.5 Pro. The results surprised us. Here is what we found.

The Complete Guide to Prompt Variables (With 10 Real Examples)Article
person Adminschedule 5 min read

The Complete Guide to Prompt Variables (With 10 Real Examples)

Stop rewriting the same prompt over and over. Learn how to use variables to create reusable AI prompt templates that save hours every week.

pin_invoke

Token Counter

Real-time tokenizer for GPT & Claude.

monitoring

Cost Tracking

Analytics for model expenditure.

api

API Endpoints

Deploy prompts as managed endpoints.

rule

Auto-Eval

Quality scoring using similarity benchmarks.