c# - 我们如何在 ItemProviderDelegate 中等待 Action/Effect 的结果？

Question

在我的 razor 组件中，我使用了一个 Virtualize 组件 (docs here)带有一个 ItemsProviderDelegate，它被实现为一个 async 方法，用于从 API 批量加载数据传输对象 (DTO)。该方法看起来像这样:

private async ValueTask<ItemsProviderResult<Dto>> LoadDtosAsync(ItemsProviderRequest request)
{
    // Massage parameters and dispatch action
    // _stateFacade is essentially a wrapper around 
    // Dispatcher.Dispatch(new LoadDtosAction())

    _stateFacade.LoadDtos(request.StartIndex, request.Count);

    // I make the assumption here that 'IsLoading' is immediately 
    // 'true' after the LoadDtosAction is dispatched. I think
    // that this is probably a bad assumption because
    // Dispatcher.Dispatch() is probably not synchronous
    // under-the-hood.

    // dtoState is an IState<Dto>
    while(_dtoState.Value.IsLoading)
    {
        // My current 'solution' to wait for the data to be loaded.
        await Task.Delay(100);
    }

    // Provide the items to the Virtualize component for rendering...
    return new ItemsProviderResult<Dto>(
        _dtoState.Value.VirtualizedDtos ?? new List<Dto>(),
        _dtoState.Value.DtosServerCount ?? 0
    );

}

这已被证明是一种有效的方法，可以从后端的模型集合中渲染批量数据，这些数据可能非常大，同时保持较小的请求大小。客户端应用程序一次只需从 API 请求少量对象，而 UI 不需要愚蠢的“页面”控件，因为用户可以直观地滚动显示数据的组件。

Fluxor 用于管理客户端应用程序的状态，包括 Virtualize 组件请求的当前 DTO。这抽象出从 API 请求批量 DTO 的逻辑，并允许根据哪个组件调度操作来触发副作用。

应用中的许多Action 类型都有一个对象？ Sender 属性，其中包含对分派(dispatch)操作的组件的引用。当分派(dispatch)所需操作的组件中的原始方法不需要返回操作的结果状态时，此方法有效。然后，效果可以根据发送 Action 的组件类型调用回调方法，例如:

public class UpdateDtoEffect : Effect<UpdateDtoSuccessAction>
{
    protected override async Task HandleAsync(UpdateDtoSuccessAction action, IDispatcher dispatcher)
    {
        var updateDtoForm = action.Sender as UpdateDtoForm;
        if (updateDtoForm is not null)
        {
            await updateDtoForm.OnSuccessfulUpdate.InvokeAsync();
        }
    }
}

当上述效果调用 OnSuccessfulUpdate 时，此操作的 reducer 将更新状态，因此回调方法可以依赖最新的状态信息。

ItemsProviderDelegate 对这种方法提出了一个有趣的异常(exception)。为了正确实现委托(delegate)，我们需要返回项目列表和服务器上可用项目的数量。此信息存储在该功能的状态中，当 LoadDtosAction 成功时，该状态由 reducer 更新。在当前的实现中(上面一般表示)，LoadDtosAsync 方法做了 2 个我不喜欢的假设:

1. 状态值 isLoading 在分派(dispatch) LoadDtosAction 时立即设置为 true。我不认为这总是正确的，因此组件有时会立即询问状态值以更新自身(这将导致显示先前的状态而不是结果状态)。

2. 生成的 action-reducer-effect 链最终会将状态 isLoading 值更新为 false。

是否有一种方法允许 ItemsProviderDelegate 实现分派(dispatch) LoadDtosAction 并“等待”返回 ItemsProviderResult 的操作结果>?

• 编辑 - 操作流程如下所示:

LoadDtosAction => 
LoadDtosActionReducer (new state, 'isLoading':true) =>
LoadDtosActionEffect (performs asynchronous API call) =>
LoadDtosSuccessAction =>
LoadDtosSuccessActionReducer (new state, 'VirtualizedDtos':{IEnumerable<Dto>}, 'DtosServerCount':{int})
LoadDtosSuccessEffect (perform optional asynchronous callbacks to 'Sender')

Answer 1

我认为你可以做这样的事情

1. 有一个TaskCompletionSource<ItemsProviderResult<Employee>>组件中的成员。
2. 在LoadDtosAsync分派(dispatch)一个具有包含对该 TaskCompletionSource 的引用的属性的操作
3. await那TaskCompletionSource

UI 部分已经完成，现在是商店部分

[ReducerMethod(typeof(LoadDtosAction))]
public static MyState ReduceLoadDtosAction(MyState state) => state with {IsLoading = true };

[ReducerMethod(typeof(LoadDtosActionResult))]
public static MyState ReduceLoadDtosActionResult(MyState state) = state with {IsLoading = false; }

[EffectMethod]
public async Task HandleLoadDtosAsync(LoadDtosAction action, IDispatcher dispatcher)
{
  var yourData = await HttpClient.GetJson(............);
  action.TaskCompletionSource.SetResult(yourData);
  Dispatcher.Dispatch(new LoadDtosActionResult()); // Just to set IsLoading = false;
}

请注意，这没关系，因为尽管 TaskCompletionSource可以被认为是可变状态，我们没有将它存储在 Store 中本身 - 我们只是在 Action 状态下传递它(它可以保存可变数据)。