createEffect异步问题：HTTP请求完成前更新slice

问题根源 #

你的 slice reducer 大概率处理了getPipelineLogs这个触发 action，导致发起请求的同时就把状态更新成了 undefined；另外组件可能错误地尝试从dispatch的返回值里获取数据，而非通过 selector 订阅状态变化。

修复步骤 #

1. 修正 Reducer 逻辑 #

确保只有setPipelineLogs action 才会更新日志状态，getPipelineLogs作为触发类 action，不应该在 reducer 中处理状态更新：

// deployment.slice.ts
const deploymentReducer = createReducer(
  initialState,
  on(DeploymentActions.setPipelineLogs, (state, { name, data }) => ({
    ...state,
    pipelineLogs: { name, data }
  })),
  on(DeploymentActions.error, (state, { error }) => ({
    ...state,
    error
  }))
  // 移除对 DeploymentActions.getPipelineLogs 的处理逻辑
);

2. 组件中正确获取数据 #

组件不要尝试从dispatch调用中获取结果，而是通过 NgRx selector 订阅状态变化：

// app.component.ts
import { selectPipelineLogs } from './store/deployment.slice';

@Component({...})
export class AppComponent implements OnInit {
  pipelineLogs$ = this.store.select(selectPipelineLogs);

  constructor(private store: Store) {}

  ngOnInit() {
    // 仅触发 action，不订阅 dispatch 返回值
    this.store.dispatch(DeploymentActions.getPipelineLogs({ pipelineId: 'xxx' }));
  }
}

3. 优化 Effect 写法（可选） #

保留你第二种 Effect 写法即可，这种写法在单个请求流内处理映射和错误，逻辑更清晰：

// deployment.effects.ts
getPipelineLogs$ = createEffect(() =>
  this.actions$.pipe(
    ofType(DeploymentActions.getPipelineLogs),
    switchMap(({ pipelineId }) =>
      this.http.get<any>(
        `${this.apiBase}/pipelines/${pipelineId}/logs`,
        this.bufferHttpOptions
      ).pipe(
        map(result => DeploymentActions.setPipelineLogs({ name: result.logName, data: result.logData })),
        catchError(e => of(DeploymentActions.error(e)))
      )
    )
  )
);

验证逻辑 #

修改后流程变为：

1. 组件 dispatch getPipelineLogs action
2. Effect 捕获该 action，发起 HTTP 请求
3. 请求完成后，Effect dispatch setPipelineLogs action
4. Reducer 处理setPipelineLogs，将状态更新为请求返回的数据
5. 组件通过 selector 订阅到更新后的状态

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