Angular CRM应用中NgRx多模块共享状态切片的结构设计咨询

核心原则：按业务领域划分状态切片 #

不要按照UI模块（如Business、Notes）嵌套状态，而是将业务领域（Notes、Appointments、Sales、Businesses）作为顶层独立切片。这样所有涉及笔记的操作，不管是全局Notes页面还是Business/[id]/Notes子页面，都统一操作同一个notes状态切片，从根源解决数据重复请求和状态不一致问题。

具体状态结构示例 #

全局根状态 #

export interface AppState {
  notes: NotesState;
  appointments: AppointmentsState;
  sales: SalesState;
  businesses: BusinessesState; // 单独存储业务基础信息，与其他领域切片平级
}

Notes领域状态结构 #

采用NgRx官方推荐的entities+ids标准化结构，兼顾数据查找效率和顺序维护：

export interface NotesState {
  entities: { [noteId: string]: Note }; // 字典存储所有笔记，通过ID快速定位
  ids: string[]; // 存储笔记ID数组，维持数据展示顺序
  loaded: boolean; // 标记全量笔记是否已从服务端加载完成
  loading: boolean; // 标记是否正在加载数据
  error: string | null; // 加载错误信息
}

// Note实体定义
export interface Note {
  id: string;
  businessId: string; // 关联业务ID，用于后续筛选
  content: string;
  createdAt: Date;
  // 其他业务字段...
}

跨模块共享数据的实现细节 #

统一动作（Actions） #

所有针对Notes的操作（加载、新增、编辑、删除）都在Notes领域的action文件中定义，全局和Business模块的组件统一dispatch这些动作：

// notes.actions.ts
export const loadNotes = createAction('[Notes] Load Notes');
export const loadNotesSuccess = createAction(
  '[Notes] Load Notes Success',
  props<{ notes: Note[] }>()
);
export const addNote = createAction(
  '[Notes] Add Note',
  props<{ note: Note }>()
);
// 其他动作（编辑、删除等）...

单一Reducer处理状态修改 #

所有针对notes切片的动作，都由同一个Reducer处理，保证状态修改的一致性：

// notes.reducer.ts
const initialState: NotesState = {
  entities: {},
  ids: [],
  loaded: false,
  loading: false,
  error: null
};

export const notesReducer = createReducer(
  initialState,
  on(loadNotes, (state) => ({ ...state, loading: true })),
  on(loadNotesSuccess, (state, { notes }) => {
    const entities = notes.reduce((acc, note) => {
      acc[note.id] = note;
      return acc;
    }, { ...state.entities });
    const ids = [...new Set([...state.ids, ...notes.map(n => n.id)])]; // 避免重复ID
    return { ...state, entities, ids, loaded: true, loading: false };
  }),
  on(addNote, (state, { note }) => {
    if (state.entities[note.id]) return state; // 避免重复添加
    return {
      ...state,
      entities: { ...state.entities, [note.id]: note },
      ids: [...state.ids, note.id]
    };
  }),
  // 处理其他动作...
);

分层选择器（Selectors） #

创建通用选择器和场景特定选择器，满足不同页面的数据需求：

通用选择器（基础数据获取）

// notes.selectors.ts
import { createSelector } from '@ngrx/store';
import { AppState } from '../app.state';

// 获取整个Notes切片
export const selectNotesState = (state: AppState) => state.notes;

// 获取所有笔记实体数组
export const selectAllNotes = createSelector(
  selectNotesState,
  (notesState) => Object.values(notesState.entities)
);

// 判断全量笔记是否已加载完成
export const selectNotesLoaded = createSelector(
  selectNotesState,
  (notesState) => notesState.loaded
);

场景特定选择器（按业务ID筛选）

为Business/[id]/Notes页面创建带参数的选择器，直接从现有状态中筛选数据：

// notes.selectors.ts 续
export const selectNotesByBusinessId = (businessId: string) => createSelector(
  selectAllNotes,
  (notes) => notes.filter(note => note.businessId === businessId)
);

组件使用逻辑 #

全局Notes页面 #

// notes.component.ts
@Component({ /* ... */ })
export class NotesComponent implements OnInit {
  notes$ = this.store.select(selectAllNotes);
  loaded$ = this.store.select(selectNotesLoaded);

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.loaded$.pipe(take(1)).subscribe(loaded => {
      if (!loaded) {
        this.store.dispatch(loadNotes());
      }
    });
  }
}

Business/[id]/Notes页面 #

// business-notes.component.ts
@Component({ /* ... */ })
export class BusinessNotesComponent implements OnInit {
  businessId = this.route.snapshot.paramMap.get('id')!;
  notes$ = this.store.select(selectNotesByBusinessId(this.businessId));
  loaded$ = this.store.select(selectNotesLoaded);

  constructor(private store: Store<AppState>, private route: ActivatedRoute) {}

  ngOnInit() {
    this.loaded$.pipe(take(1)).subscribe(loaded => {
      if (!loaded) {
        this.store.dispatch(loadNotes());
      }
    });
  }
}

这样不管用户先进入哪个页面，只要数据已加载，另一个页面就会直接从状态中获取，不会重复请求。

状态一致性保障 #

所有涉及Notes的修改操作（比如在Business模块下新增关联笔记），都通过统一的Actions触发，Reducer处理后更新全局notes切片，全局Notes页面和Business子页面的订阅会自动同步最新数据，无需额外处理。

内容的提问来源于stack exchange，提问作者ben