将Immer与NgRx减速器集成

时间:2019-11-25 18:16:01

标签: javascript angular typescript ngrx immer.js

看看redux和ngrx,似乎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也需要完全取消引用。

没有很多关于沉浸式和createReducer集成的示例,因为这是2019年的最新变化。我应该禁用no-shadowed-variable进行沉浸式规则还是有更好的模式来确认stateexample均已正确取消引用。 example是多个级别的对象。

或者,我可以避免使用immer和ramda clone或尝试手动对所有内容进行深度复制。

1 个答案:

答案 0 :(得分: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,您应该按照正确的方向进行操作。