Angular中如何通过NGRX reducer更新数组类型的state？

• 状态层级不匹配：worklogs属于Outreach下outreach属性（CaseState类型）的子属性，不能直接在根OutreachState层级新增worklogs字段，不符合你的类型定义。
• 数组拼接逻辑错误：传入的worklog是单条WorklogCase对象，不能直接展开为数组，需要先取出原有worklogs数组，再将新worklog追加到数组末尾。
• 语法疏漏：on方法的回调函数参数未用括号包裹，部分命名存在笔误（比如action名addWoklogSuccess少了字母r，应为addWorklogSuccess）。
• 边界判断缺失：未判断state.outreach是否为null，直接访问其属性会引发运行时报错。

export const outreachDetailsReducers = createReducer<OutreachState>(
  initialState,
  on(outreachActions.addWorklogSuccess,
  (state, { worklog }) => {
    // outrach为空时直接返回原状态，可根据业务需要替换为初始化逻辑
    if (!state.outreach) return state;
    return {
      ...state,
      outreach: {
        ...state.outreach,
        worklogs: [...state.outreach.worklogs, worklog]
      }
    };
  })
);

如果业务允许提交worklog时outreach还未初始化，可以添加兜底初始化逻辑，不需要直接返回原状态：

export const outreachDetailsReducers = createReducer<OutreachState>(
  initialState,
  on(outreachActions.addWorklogSuccess,
  (state, { worklog, caseId }) => { // caseId需要你在action定义时作为参数传入
    return {
      ...state,
      outreach: state.outreach ? {
        ...state.outreach,
        worklogs: [...state.outreach.worklogs, worklog]
      } : {
        outreachCaseId: caseId,
        worklogs: [worklog]
      }
    };
  })
);

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