Question

假设您通过从BookComponent调度CREATE_BOOK操作来创建新Book。实际上，我们正在处理http保存，然后通过CREATE_BOOK_SUCCESS操作将创建的Book传递给减速器。到目前为止一切顺利。

但是，如何在生成CREATE_BOOK操作的BookComponent中获取新创建的Book的ID？我只能想到解决方法：

将创建的书存储在状态中的lastCreatedBook字段中。如果我有很多不同的物品，这似乎无法扩展。另外，当组件被销毁时，我必须清理该字段。
在BookComponent中检索书籍的完整列表。最后一个是创建的书。
请勿使用ngrx / effects。只需调用BookService.create（）方法并订阅即可。从那里调度CREATE_BOOK_SUCCESS操作。但是为什么要首先使用效果？

Answer 1

您不能直接让组件知道已创建的ID，因为您必须遵循redux的单向数据流。

如果您真的想在某个地方使用ID，则可以按照您提到的方式将其存储在商店状态中，或者创建ID客户端。

如果要在列表中的某处突出显示已创建的书，则可以实现*ngFor指令的trackBy function，并在新创建的项目上创建动画。

有关更多效果的用法，请查看Start using ngrx/effects for this

Answer 2

我也一直在面对这种情况，我认为您有2种选择：

第一个也是绝对最简单的，您可以使用UUID库直接在前端创建ID，但是也许您的ID是在后端生成的，您不能这样做
第二个选项，前进的位置要少一些，但效果也很好：

生成ID并将其传递到操作的有效负载内（如果需要，还可以添加当前有效负载）。您可以将其命名为actionId。

从您的效果来看，当您映射到动作CREATE_BOOK_SUCCESS时，还要传递您有权访问的ID！（因为我们在处理CREATE_BOOK动作的代码段中。）

从（智能）组件中，您可以订阅动作，就像在效果中一样！因此，您可以执行以下操作：

class MyComponent {
  // ...

  createBook(book: Book) {
    // first, generate a unique ID to track the action
    // you can call directly the uuid function or even better create
    // a uuidService that you inject but for simplicity here I'm not doing it
    const actionId: string = uuid();

    // then watch for an action of type CREATE_BOOK_SUCCESS with that ID
    this.actions.pipe(
      ofType<BooksActions.CreateBookSuccess>(BooksActions.CREATE_BOOK_SUCCESS),
      filter(({payload}) => payload.actionId === actionId),
      first(),
      tap(({payload}) => {
        // do what you want here
        // you've got access to the payload of the CREATE_BOOK_SUCCESS action where
        // you have the book returned from the backend (I think)
      })
    );

    // finally, dispatch the action
    // it's important to do it after you've subscribed to actions otherwise it might happen
    // too fast and you wouldn't get the notification
    this.actions.dispatch(new BooksActions.CreateBook({ ...book, actionId }));
  }

  // ...
}

请注意，在订阅该操作时，我在这里使用first，因此即使您快速地重新添加10本书，您也会有10个不同的订阅，这完全没问题。

在ngrx（带有ngrx / effects）中，如何检索新创建的项目的ID？

2 个答案: