NgRx通用Reducer实现问询：多Store复用同Reducer功能

Great job on building a generic reducer to reuse logic across your NgRx stores—this kind of DRY (Don’t Repeat Yourself) approach is exactly what keeps large Angular codebases maintainable! Let’s walk through how your implementation stacks up against NgRx best practices, and where you can refine things for better type safety and alignment with NgRx’s ecosystem.

What You’re Doing Right #

First, let’s highlight the wins:

• Reusable reducer logic: Avoiding duplicate reducer code for similar stores is a core NgRx best practice—you’re already on the right track here.
• Generic support: Using <T> to handle different item types in itemList shows you’re thinking about type safety, which is critical in TypeScript + NgRx setups.

Key Optimizations & Best Practice Adjustments #

1. Strengthen Type Safety (Eliminate any!)

Your current code uses State<any> for the initial state and action: any—this weakens TypeScript’s type checking, which defeats a big benefit of using NgRx with TypeScript. Here’s how to fix this:

• Make initial state generic: Instead of hardcoding a shared initialState with any, let each store pass its own typed initial state to the reducer creator. For example:

  interface State<T> { itemList: T[] }
  
  const createReducer = <T>(type: string, initialState: State<T>) => {
    return (state = initialState, action: { type: string; payload: T }): State<T> => {
      switch (action.type) {
        case `${type}_Add`: // Explicit action type naming avoids implicit dependencies
          return { ...state, itemList: [...state.itemList, action.payload] };
        // Add other cases here
        default:
          return state;
      }
    };
  };
  

• Typed actions: Define a generic action type instead of using any—this ensures the payload matches the item type for each store.

2. Leverage NgRx’s Official createReducer API

NgRx provides a built-in createReducer function (from @ngrx/store) that’s designed to reduce boilerplate and enhance type safety. You can wrap this in your generic creator to get the best of both worlds:

import { createReducer, on, createAction, props } from '@ngrx/store';

// Generic action creator for shared actions (add, remove, etc.)
export const createItemActions = <T>(featureKey: string) => ({
  addItem: createAction(`[${featureKey}] Add Item`, props<{ payload: T }>()),
  removeItem: createAction(`[${featureKey}] Remove Item`, props<{ id: number }>()),
  // Add other common actions here
});

// Generic reducer creator using NgRx's official API
export const createItemReducer = <T>(initialState: State<T>, actions: ReturnType<typeof createItemActions<T>>) => {
  return createReducer(
    initialState,
    on(actions.addItem, (state, { payload }) => ({
      ...state,
      itemList: [...state.itemList, payload]
    })),
    on(actions.removeItem, (state, { id }) => ({
      ...state,
      itemList: state.itemList.filter(item => item.id !== id) // Adjust based on your item structure
    }))
  );
};

This approach:

• Uses NgRx’s battle-tested reducer utilities
• Automatically infers types for actions and state
• Makes it easy to extend with more shared action cases later

3. Isolate Feature Stores with Feature Keys

Using a featureKey (like 'Users' or 'Products') in your action types (e.g., [Users] Add Item) prevents action type collisions across different stores. This is a standard NgRx practice to keep your state management clean as your app scales.

4. Optional: Use Immer for Simpler State Updates

NgRx’s createReducer works seamlessly with Immer, which lets you write immutable state updates in a mutable style (no more spread operator hell!). To enable this:

import { produce } from 'immer';

// Inside your reducer case
on(actions.addItem, produce((state: State<T>, { payload }) => {
  state.itemList.push(payload); // Immer handles the immutability under the hood
}))

This makes your code more readable and less error-prone, especially with complex state structures.

Final Thoughts #

Your core idea of reusing reducer logic is 100% aligned with NgRx best practices. The main tweaks are around tightening type safety, leveraging NgRx’s official tools, and isolating feature state. These changes will make your code more robust, maintainable, and consistent with how the NgRx ecosystem is designed to work.

内容的提问来源于stack exchange，提问作者Ayoub.A