将 Immer 与 NgRx 减速器集成答案

【问题标题】：Integrate Immer with NgRx reducer将 Immer 与 NgRx 减速器集成
【发布时间】：2019-11-26 02:56:04
【问题描述】：

查看 redux 和 ngrx，看起来 immer 是推荐的库，用于在存储之前生成状态副本。在 immer 示例之后，我将以下代码添加到我的 reducer：

  on(exampleActions.updateExample, (state, { example }) => {

    return produce((state: ExampleType, draft: ExampleType) => {
      draft.push({ example });
      draft[1].done = true;
    });

  })

并且打字稿抱怨no-shadowed-variable，这与示例冲突。此外，我无法在没有返回类型错误的情况下返回值。

如果example 是多级对象：

const example = {
  a: {
    b: { c: 1 }
  }
};

draft 也需要完全取消引用。

没有很多 immer 和 createReducer 集成的示例，因为这是 2019 年的最新变化。我应该禁用 immer 的 no-shadowed-variable 规则还是有更好的模式来确认 @987654328 @ 和 example 已正确取消引用。 example 是一个多层次的对象。

或者，我可以避免使用 immer 并使用 ramda clone 或尝试手动深度复制所有内容。

【问题讨论】：

no-shadowed-variable 警告可以通过简单地重命名冲突的变量名来解决
在这种情况下无法重命名，因为需要该变量。我需要把它传递给(state: ExampleType, draft: ExampleType)。

标签： javascript angular typescript ngrx immer.js

【解决方案1】：

这就是 ngrx-etc 解决的问题，使用 mutableOn 函数（使用 Immer）

const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
  {
    entities: {},
  },
  mutableOn(create, (state, { type, ...entity }) => {
    state.entities[entity.id] = entity
  }),
  mutableOn(update, (state, { id, newName }) => {
    const entity = state.entities[id]
    if (entity) {
      entity.name = newName
    }
  }),
  mutableOn(remove, (state, { id }) => {
    delete state.entities[id]
  }),
)

源代码可以在here找到，你应该采取正确的方向。

【讨论】：

这看起来很有希望。谢谢！