严格模式Angular应用中多NgRx Store注册及编译错误解决

一、编译错误的根源与解决方案 #

你遇到的类型不匹配错误，核心原因是NgRx的ActionReducer类型要求reducer的第二个参数必须是通用的Action类型，而你一开始限定了SoundtrackActions联合类型。NgRx内部在初始化和运行过程中会传递一些通用Action（比如初始化用的内部Action），这些并不属于你的SoundtrackActions联合类型，所以类型检查直接报错了。

你自己找到的解决方案是完全正确的：把reducer的action参数类型改成Action即可，代码如下：

export function soundtrackReducer(state: SoundtrackState | undefined, action: Action): SoundtrackState {
  return _soundtrackReducer(state, action);
}

因为createReducer和on操作符会自动帮你过滤匹配的Action类型，完全不需要手动用联合类型限定——NgRx会在编译时自动推导哪些Action会被处理，不用担心类型安全问题。

二、Action创建方式的选择：类 vs 辅助函数 #

关于用类创建Action还是用createAction辅助函数的疑问，这里给你明确的建议：

• 类风格Action：这是NgRx早期的写法，优点是类型定义直观，适合需要复杂逻辑的Action，但缺点很明显——需要手动维护SoundtrackActions联合类型，代码冗余，每次加新Action都要更新联合类型，容易出错。
• createAction辅助函数：这是NgRx官方现在强烈推荐的现代写法，代码简洁，自动处理类型推导，不需要手动维护联合类型。配合createReducer+on的组合，能大幅减少冗余代码，还能避免手动维护类型带来的错误。

所以优先选择createAction+createReducer的组合，这是目前NgRx的最佳实践，你自己写的辅助函数版本的代码就很规范。

三、多Store（全局+Feature）的注册方法 #

如果你的应用既有全局偏好Store，又有多个Feature Store，注册方式分两种场景：

1. 全局Root Store注册 #

在AppModule中使用StoreModule.forRoot()注册全局范围内的reducer，比如全局偏好的reducer：

@NgModule({
  imports: [
    // 其他模块
    StoreModule.forRoot({
      appPreferences: appPreferencesReducer, // 全局偏好reducer
      // 如果soundtrack是全局state，也可以在这里注册
      // soundtracks: soundtrackReducer
    })
  ]
})
export class AppModule { }

2. Feature Store注册 #

对于每个独立的Feature模块（比如SoundtracksModule），使用StoreModule.forFeature()在模块内部注册自己的reducer：

@NgModule({
  imports: [
    // 其他模块
    StoreModule.forFeature('soundtracks', soundtrackReducer)
  ]
})
export class SoundtracksModule { }

这样，Feature的state会挂载在全局state的soundtracks属性下，和全局reducer完全隔离，保持代码的模块化。注意：同一个reducer不要同时用forRoot和forFeature注册，避免重复。

补充：关于自定义基础Action的尝试 #

你之前尝试定义CustomAction接口的做法其实没必要，因为createAction已经自动帮你处理了Action的结构，而且on操作符会自动提取Action中payload/error属性的类型，完全不需要自己扩展基础Action接口。

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