使用带状态对象的展开 (...) 运算符实现所需结果的问题

Question

我有一个 pimRegistration 状态初始化，如下面的 chrome redux-devtools 屏幕截图所示。被引用的嵌套是 pimRegistration (state.domain.patient):

我用以下扩展运算符语句更新了 patient.name 对象：

store.update((state) => ({
  ...state,
  ...patientPath,
  ...{ [property]: value },
}));

...其中 property 是具有 value 的患者对象的“名称”属性。更新后，以下截图显示了新的状态：

请注意，原始患者对象（屏幕截图中的紫色）已使用姓名对象更新、复制并放置在状态的根目录（屏幕截图中的黄色）。

我想覆盖 pimRegistration(state).domain.patient 对象的属性，而不是 来创建新的患者对象。

调用状态更新如下所示。

store.update((state) => ({
  ...state,
  ...patientPath, // state.domain.patient
  ...{ [property]: value },
}));

我尝试了不同的组合，但没有达到预期的效果。

完整的更新功能如下图

update(property: string, path: string, value: any) {
  const paths: string[] = path.split(".");

  const pathReducer = (state: IRegistrationState, path_: string) => {
    if (paths.length <= 0) {
      return state.domain;
    }
    return state[path_];
  };

  const domainPath = state.domain;
  let patientPath, nokPath, referrerPath;

  if (path.includes("patient")) {
    patientPath = paths.reduce(pathReducer, state);
  }

  if (path.includes("nok")) {
    nokPath = paths.reduce(pathReducer, state);
  }

  if (path.includes("referrer")) {
    referrerPath = paths.reduce(pathReducer, state);
  }

  store.update((state) => ({
    ...state,
    ...patientPath,
    ...{ [property]: value },
  }));
}

上面的函数在Angular2.

中用下面的语句调用

if (this.path.includes("patient")) {
  this._repo.update("name", "domain.patient", this.name);
}

谢谢

Answer 1

商店的深度更新可能很棘手。在您的函数中，您似乎在根目录而不是在您希望更新的级别传播更新。概述了更新状态的通常做法。简而言之，类似于

const newState = {
  ...state,
  domain: {
    ...state.domain,
    patient: {
      ...state.domain.patient,
      [property]: value
    }
  }
}

动态传递路径并更新此状态可能……很麻烦。有一些库可以帮助您做到这一点，例如 immer，但您可以使用普通的 JS/TS.

来解决问题。

使用带状态对象的展开 (...) 运算符实现所需结果的问题

Problems achieving required result of using the spread (...) operator with state object

javascript

typescript

ecmascript-6

redux