如何通过 Angular 中的 NGRX 减速器使用数组更新状态？

Posted 2023-02-19

【中文标题】如何通过 Angular 中的 NGRX 减速器使用数组更新状态？

【英文标题】：How to update state with an array via NGRX reducer in Angular?

【发布时间】：2022-01-11 21:34:08

【问题描述】：

我想使用 ngrx reducer 更新我的状态，但我遇到了编译错误。

为了上下文。用户在表单上提交工作日志，我希望将此工作日志添加到状态上的工作日志数组中。

这是我的状态的结构：

export declare interface Outreach 
  outreach: CaseState|null;


export declare interface CaseState 
  outreachCaseId: string;
  worklogs: WorklogCase[];  // <- I want to add the new worklog here


export declare interface WorklogCase 
  worklogId: string;
  username: string;
  details: string;

减速器：

const initialState: OutreachState = 
  outreach: null,


export const outreachDetailsReducers = createReducer<OutreachState>(
    initialState,
    on(outreachActions.addWoklogSuccess,
    state, worklog) => (...state, worklogs: [...worklog])),

我认为我在减速器的最后一行有一些错误。有什么帮助吗？

【问题讨论】：

你能在这里分享那个语法错误信息吗？

【参考方案1】：

您的worklogs 状态嵌套在outreach 属性下，该属性可能是null。

因此，在使用新的worklog 更新其worklogs 数组之前，您必须检查outreach 属性是否不是null：

export const outreachDetailsReducers = createReducer<OutreachState>(
  initialState,
  on(
    outreachActions.addWoklogSuccess,
    state,  worklog ) => (
      ...state,
      outreach: state.outreach !== null
        ? 
            ...state.outreach,
            worklogs: [...state.outreach.worklogs, worklog]
          
        : null,
      
  )
),

理想情况下，您应该尝试使您的状态尽可能平坦，以避免嵌套带来的复杂性。

【讨论】：

这是正确的答案 - 但您也可以查看 ngrx-immer 以更轻松地更新状态。 github.com/timdeschryver/ngrx-immer