將 Immer 與 NgRx 減速器集成

Question

查看 redux 和 ngrx，似乎 immer 是推薦的庫，可以在存儲之前生成狀態副本。 按照 immer 示例，我將以下代碼添加到我的減速器中：

  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規則還是有更好的模式來確認state和example都正確取消引用。 example是一個多層次的對象。

或者，我可以避免使用 immer 並使用 ramda clone或嘗試手動深度復制所有內容。

Answer 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]
  }),
)

可以在此處找到源代碼，您應該朝着正確的方向前進。