如何在NGRX与Angular signals中链式调用rxMethods？

要实现loadRandomAuthor执行完成后自动触发loadBooksByAuthorId，可以通过以下两种简洁方式实现：

方法一：直接调用rxMethod的输入流触发 #

rxMethod本质是返回一个Subject，你可以先定义目标方法，再在回调里调用它的next()方法触发执行：

export const BookStore = signalStore(
    {providedIn: 'root'},
    withState(initialState),
    withMethods((store, bookService = inject(BookService)) => {
        // 先定义loadBooksByAuthorId方法
        const loadBooksByAuthorId = rxMethod<number>(
            pipe(
                switchMap((authorId: number) => {
                    return bookService.getBooksByAuthorId(authorId).pipe(
                        tap({
                            next: (books: Book[]) => {
                                patchState(store, {books});
                            },
                        })
                    );
                })
            )
        );

        return {
            loadRandomAuthor: rxMethod<number>(
                pipe(
                    switchMap(() => {
                        return bookService.getRandomAuthor().pipe(
                            tap({
                                next: (author: Author) => {
                                    patchState(store, {author});
                                    // 触发loadBooksByAuthorId执行
                                    loadBooksByAuthorId.next(author.id);
                                },
                            })
                        );
                    })
                )
            ),
            loadBooksByAuthorId
        };
    })
);

方法二：用RxJS流组合实现链式逻辑 #

如果更倾向于RxJS的流式风格，可以直接把两个请求的逻辑组合成一个流，无需显式调用方法：

export const BookStore = signalStore(
    {providedIn: 'root'},
    withState(initialState),
    withMethods((store, bookService = inject(BookService)) => ({
        loadRandomAuthorAndBooks: rxMethod<void>(
            pipe(
                switchMap(() => bookService.getRandomAuthor()),
                tap(author => patchState(store, {author})),
                switchMap(author => bookService.getBooksByAuthorId(author.id)),
                tap(books => patchState(store, {books}))
            )
        ),
        // 保留独立方法供其他场景单独调用
        loadBooksByAuthorId: rxMethod<number>(
            pipe(
                switchMap((authorId: number) => {
                    return bookService.getBooksByAuthorId(authorId).pipe(
                        tap({
                            next: (books: Book[]) => {
                                patchState(store, {books});
                            },
                        })
                    );
                })
            )
        )
    }))
);

关键说明 #

• 方法一保留了两个方法的独立性，既可以单独调用loadBooksByAuthorId，也能通过loadRandomAuthor自动触发链式执行
• 方法二把链式逻辑封装成单一方法，适合不需要单独调用中间步骤的场景
• 确保rxMethod初始化完成后再调用next()，方法一中先定义后返回的写法可以避免初始化问题

内容的提问来源于stack exchange，提问作者Maxime