从 NgRX 效果更新状态集合/数组的操作和化简器语法是什么?

Question

我有一个NgRX状态：

import { Item } from './item';
export interface FeatureAState {
items: Item[];
}

以及一个操作 ('[featureA] Add Item'(，它将一个 Item 对象添加到我的商店中的 Items 数组中。我想在添加每个项目后通过背景效果更新此集合。

export const addItem = createAction(
'[featureA] Add Item',
(item: Item = { id: 3, title: 'Duff McKagen' }) => ({ item })
);

我创建了一个在减速器添加项目后触发的效果：

updateItems$ = createEffect(() => this.actions$.pipe(
ofType('[featureA] Add Item'),
concatMap(() => this.myService.doSomeWork()
.pipe(
map(updatedItems => ({ type: '[featureA] Updated', payload: updatedItems }))
))
));

根据我的理解，这需要myService.doSomeWork()返回可观察量？现在，我已经将返回硬编码为从新数组创建的可观察量，因此我希望一旦效果完成并且'[featureA] Updated'操作由化简器处理，商店项目将更改为此新数组。

export class MyserviceService {
doSomeWork() {
return of([{ id: 6, title: 'Peter Parker' }]);
}
}

所以我现在需要一个操作来处理效果结果并更新商店？但是我不知道如何为此编写动作或减少器。

export const updatedItems = createAction(
'[featureA] Updated',
props<{ items: Item[] }>()
);
// Also tried...
export const updatedItems = createAction(
'[featureA] Updated',
(items: Item[]) => ({ items }) // don't understand what I'm doing here, but I guess this action needs to pass through the output of `myService.doSomeWork()` (an Observable mapped to an Action via concatMap()?) for the Reducer to handle?
);

on(updatedItems, (state, { updatedItems }) => ({
...state,
items: updatedItems // I suspect this is not correct, or the 'updatedItems' action is not passing through the correct object
}))
The error I seem to be getting is `ERROR in src/app/featureA/state/featureA.reducer.ts(11,32): error TS2339: Property 'updatedItems' does not exist on type '{ items: Item[]; } & TypedAction<"[featureA] Updated"> & { type: "[featureA] Updated"; }'.`

Answer 1

而不是updatedItems，你应该使用items，因为你在操作有效负载中传递它。

on(updatedItems, (state, { items }) => ({
...state,
items
}))

Answer 2

问题似乎出在这里：

updateItems$ = createEffect(() => this.actions$.pipe(
ofType('[featureA] Add Item'),
concatMap(() => this.myService.doSomeWork()
.pipe(
map(updatedItems => ({ type: '[featureA] Updated', payload: updatedItems })) // <= HERE
))
));

我不明白payload只是我行动的属性，不必被称为payload。事实上，我将"有效载荷"传递给操作，但没有在操作或化简器中引用它。事实上，我也不需要在操作中引用它。因此，这将根据我的服务响应更新商店：

export const updatedItems = createAction(
'[featureA] Updated'
);

on(updatedItems, (state, { payload }) => ({
...state,
items: payload
}))

就像这样：

updateItems$ = createEffect(() => this.actions$.pipe(
ofType('[featureA] Add Item'),
concatMap(() => this.myService.doSomeWork()
.pipe(
map(updatedItems => ({ type: '[featureA] Updated', items: updatedItems }))
))
));

on(updatedItems, (state, { items }) => ({
...state,
items
}))

不过，我收到一个打字稿错误，可以通过使用以下任一更新操作来修复：

export const updatedItems = createAction(
'[featureA] Updated',
props<{ items: Item[] }>()
);
// or
export const updatedItems = createAction(
'[featureA] Updated',
(items: Item[]) => ({ items })
);

最后，我同意了这个，这似乎更明确地说明了正在发生的事情：

updateItems$ = createEffect(() => this.actions$.pipe(
ofType('[featureA] Add Item'),
concatMap(() => this.myService.doSomeWork()
.pipe(
map(updatedItems => ({ type: '[featureA] Updated', payload: updatedItems }))
))
));

export const updatedItems = createAction(
'[featureA] Updated',
(payload: Item[]) => ({ payload })
);

on(updatedItems, (state, { payload }) => ({
...state,
items: payload
}))