В ngrx (с ngrx / effects), как получить идентификатор вновь созданного элемента?

Я тоже столкнулся с этой ситуацией, и, на мой взгляд, у вас есть 2 варианта:

• первый и, безусловно, самый простой, вы создаете идентификатор непосредственно во фронтенде, используя библиотеку UUID, но, возможно, ваши идентификаторы генерируются на бэкэнде, и вы не можете этого сделать
• второй вариант, немного менее вперед, но он тоже отлично работает:

Сгенерируйте идентификатор и передайте его в полезной нагрузке действия (в дополнение к вашей текущей полезной нагрузке, если необходимо). Вы можете назвать это, например, actionId.

Исходя из вашего эффекта, когда вы сопоставляете действие CREATE_BOOK_SUCCESS, также передайте этот идентификатор, к которому у вас есть доступ! (потому что мы находимся в той части кода, которая обрабатывает действие 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 разных подписок, что совершенно нормально.

Вы не можете напрямую сообщить компоненту созданный идентификатор, потому что вы должны следовать однонаправленному потоку данных redux.

Если вы действительно хотите использовать идентификатор где-то, вы можете сохранить его внутри своего состояния магазина, как вы упомянули, или создать клиентскую часть идентификатора.

Если вы хотите выделить созданную книгу где-нибудь в списке, вы можете реализовать trackBy функцию из директиве *ngFor и создайте анимацию для вновь созданного элемента.

Дополнительные сведения об использовании эффектов см. На странице Начните использовать для этого ngrx / effects