NGXS：有没有办法在一个动作完成后返回一个特定的值

Posted 2023-02-19

【中文标题】NGXS：有没有办法在一个动作完成后返回一个特定的值

【英文标题】：NGXS: Is there a way to return a specific value after an action is completed

【发布时间】：2020-12-07 07:34:58

【问题描述】：

假设我们有一个状态动作来处理新列表的创建：

@Action(CreateList)
    async createList(
        ctx: StateContext<StateModel>,
         payload : CreateList
    ) 
        // Create a new list
        const newList = await this._listServiceProxy
            .create(payload.listId, payload.input)
            .toPromise();

        ctx.setState(
            patch<StateModel>(
                 lists: append([newList])
            )
        );
    

假设我们需要创建列表的新 ID。

目前，action dispatch 只返回一个在 action 完成后接收新状态的 observable。在这种情况下获取最后一个列表是可行的，但根据使用情况找到解决方法并不总是那么容易。

如何发回创建的列表 ID？

【问题讨论】：

在函数中返回你需要的值。可以订阅 dispatch action 获取返回数据

@AjanthaBandara 我试过这样做，但是调度本身的订阅总是返回新状态，而对ofActionSuccessful动作生命周期的订阅总是返回动作有效负载

【参考方案1】：

根据我在 NGXS 官方 slack 频道上得到的答案，从动作调度返回一个值是一种反模式。因此提供了以下解决方案（感谢@poloagustin！）：

将列表 ID 也存储在状态中。 在创建时将新创建的列表的 ID 添加到列表数组后，将其推送给它。 使用动作的生命周期来检测动作分派的结束。 使用选择器获取 id 的数组。

行动：

@Action(CreateList)
    createList(
        ctx: StateContext<StateModel>,
         payload : CreateList
    ) 
        // Creation logic

        return ctx.setState(
            patch<StateModel>(
                 lists: append([newList]),
                 newIds: patch([payload.listId]: newList.map((id) => id)) 
            )
        );

在组件中：

const postCreateListOperationsSubscription = this.actions.pipe(ofActionSuccessful(CreateList), tap((payload) => 
  const newIds = this.store.select(state => state.app.newIds[payload.listId]);
))