在Angular NGRX的Storybook环境中使用ReduxDevTools是否有解决方案？

1. Storybook 运行环境未正确注册 NGRX DevTools 实例
   正式项目中一般会在根模块导入StoreDevtoolsModule.instrument()绑定DevTools，但Storybook的组件渲染上下文是独立的，如果你在story的模块配置或者全局Storybook配置里没有加入DevTools相关provider，store的变更就不会同步到DevTools面板。
2. 使用了Mock NGRX Store而非真实Store实例
   很多开发者写Storybook用例时为了规避后端依赖，会用provideMockStore模拟store，这个模拟实现默认不会和Redux DevTools通信，自然看不到状态变更。
3. DevTools 配置过滤了对应action/状态
   如果DevTools配置中设置了actionsBlacklist、predicate等过滤规则，刚好把你触发的loadAccountDebtor相关action过滤掉，也会看不到同步。
4. Store 实例隔离导致绑定丢失
   Storybook每个story默认会创建独立的注入器上下文，如果你只在全局配置了一次DevTools，每个story单独初始化的store实例没有绑定到已初始化的DevTools上，也会出现同步失效。
5. 版本不兼容
   如果你的NGRX版本和浏览器Redux DevTools插件、或是Storybook自带的Redux DevTools addon版本不匹配，也会出现状态同步失败的情况。

• 方案1：使用真实NGRX Store并正确配置DevTools（推荐，可1:1还原正式环境行为）
  在story的moduleMetadata或者Storybook全局preview.ts配置中，完整导入NGRX相关模块，包含DevTools配置：

// 单个story配置示例
export default {
  title: 'Components/AccountDebtor',
  component: AccountDebtorComponent,
  decorators: [
    moduleMetadata({
      imports: [
        StoreModule.forRoot({
          currentAccountDebtor: currentAccountDebtorReducer
        }),
        EffectsModule.forRoot([AccountDebtorEffects]), // 调用API的effect也要导入
        StoreDevtoolsModule.instrument({
          maxAge: 25,
          logOnly: false,
        }),
        HttpClientModule // 未mock API的情况下需要导入用于发请求
      ],
      providers: [AccountDebtorService] // 对应的API服务也要注册
    })
  ]
} as Meta;

如果要全局配置所有story复用该配置，可以把上述模块导入写到.storybook/preview.ts的applicationConfig里。

• 方案2：使用Mock Store时手动开启DevTools通信
  provideMockStore支持绑定DevTools，只需要在配置时加上enableDevTools: true即可：

// 单个story用mock store的配置示例
decorators: [
  moduleMetadata({
    providers: [
      provideMockStore({
        initialState: yourInitialState,
        enableDevTools: true // 开启后即可同步状态到DevTools
      }),
      // 如果要模拟effect触发的success action，可以用provideMockActions模拟API返回
      provideMockActions(() => of(loadAccountDebtorSuccess({ currentAccountDebtor: mockData })))
    ]
  })
]

• 方案3：排查DevTools过滤规则
  检查StoreDevtoolsModule.instrument()的配置，移除可能过滤目标action的actionsBlacklist、predicate等配置，确保所有action都能被DevTools捕获。

• 方案4：排查版本兼容问题
  如果使用了Storybook的Redux DevTools addon，确保其版本和项目中NGRX的大版本一致，也可以暂时卸载addon，用浏览器原生的Redux DevTools排查问题。

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