NgRx 中的 Reducer 在连续调度第二个动作后采用旧状态

Question

每个员工都有很多技能，可以用employee.skills访问，我做了添加、删除和更新它们的逻辑。

除这种情况外，一切正常：例如，假设我添加了一项技能。好的技能被添加，组件重新渲染并且技能显示在列表中。之后我更新了一些其他技能。此其他技能得到更新，但先前添加的技能从列表中删除。在 Redux DevTools 扩展中，我看到更新技能操作采用旧状态（新添加技能之前的状态）并且只是更新了另一个技能。 但是在我刷新页面后，一切似乎都正常：新技能出现了，另一个技能也更新了。无论以哪个顺序调度哪个动作，都会发生这种情况。

第一步： Add skill

第二个动作：Update some other skill

员工模型：

export class Employee {
  id?: number;
  firstName: string;
  lastName: string;
  skills?: Skill[];

}

Answer 1

问题似乎出在 UPDATE_SKILL_SUCCESS reducer 函数中。

ADD_SKILL_SUCCESS 函数正在将新技能添加到 skill 属性中 EmployeeState。您没有将它添加到 Employee 对象中的 skill。
现在，在更新技能时，您正在从 Employee 模型的 skills 属性中获取 newState（没有新添加的技能）。

所以为了让它为你工作，你需要稍微调整你的 UPDATE_SKILL_SUCCESS reducer 函数。
将第一行替换为 let newState = state['skills']; 它应该适合你。

NgRx 中的 Reducer 在连续调度第二个动作后采用旧状态

Reducer in NgRx takes old state after dispatching second action in a row

angular

ngrx

ngrx-store

ngrx-effects