如何使用多个组件构建页面，为 Blazor 页面实现 State 模式？

Question

我有一个 Blazor 页面，其中使用了多个组件 - 我如何实现 State 模式（最好是每页）来处理页面的当前 state？

目前我在页面上完成了所有 state 和状态操作（并通过注入的服务），但我想实现一个 state 模式会更清晰，其中每个页面都有某种 State object 然后允许你操作页面及其组件以严格的方式。

Ideally the State object would implement INotifyPropertyChanged and be able to dynamically have its State updated, but I also don't hate the idea of having the State object relegate State-manipulation to methods on the object to make sure state isn't just 1- off 在 Blazor 页面更新。

我已经尝试过实现某种 MVVM 模式，但这变成了问题多于答案。

我开始为正在处理的当前页面创建一个 State object，但我不确定我是否应该基本上将 Blazor 页面上的大部分逻辑放在 State object 中，或者我是否应该仍然有一些数据，但将繁重的工作委托给 State。

例如：我有一些代码曾经在 Blazor 页面上的“OnAfterRenderAsync”function 中，但我正在将其中的所有内容基本上移动到 State object 中的“LoadMatterDetails()”function 中. 这是否有意义，或者我应该只在 state object 中真正拥有 object State，并在特定信息可用时写入和读取 State object？

public class MatterDetailsState : IMatterDetailsState
{
    private readonly IMatterDetailsService matterDetailsService;
    private readonly NavigationManager navigationManager;

    public bool EditMode { get; private set; } = false;
    public int EditMatterId { get; private set; } = 0;
    public Matter Matter { get; set; } = new();
    public MatterPaymentOptionDetails PaymentDetails { get; set; } = new();

    public List<MatterStatus> MatterStatuses { get; private set; } = new();


    public MatterDetailsState(
        IAppState appState,
        IMatterDetailsService matterDetailsService,
        NavigationManager navigationManager)
    {
        this.matterDetailsService = matterDetailsService;
        this.navigationManager = navigationManager;
    }

    public async Task LoadMatterDetails()
    {
        // Query Params handling
        var uri = navigationManager.ToAbsoluteUri(navigationManager.Uri);
        var decryptedUri = HelperFunctions.Decrypt(uri.Query);
        var queryParamFound = QueryHelpers.ParseQuery(decryptedUri).TryGetValue("MatterID", out StringValues uriMatterID);

        if (queryParamFound)
        {
            EditMatterId = Convert.ToInt32(uriMatterID);
            EditMode = !String.IsNullOrEmpty(uriMatterID) && EditMatterId > 0;
        }

        await LoadMatterStatuses();

        if (EditMode)
        {
            Matter = await matterDetailsService.GetMatterByIdAsync(EditMatterId);
            PaymentDetails = await matterDetailsService.GetMatterPaymentInfoByMatterId(EditMatterId);
        }
    }

    private async Task LoadMatterStatuses()
    {
        MatterStatuses = await matterDetailsService.GetAvailableMatterStatusesAsync();
    }
}

基本上，我应该而不是在 State object 中或多或少地拥有整个 function，还是仅通过 State object 中的函数进行设置 Matter & PaymentDetails go 之类的调用？ 不确定这个标准是什么。

Answer 1

我用过 Fluxor，它是 Blazor 的 Flux/Redux 库，我很喜欢它。 它将所有 state 保存在 object 中，您可以将其注入组件以进行读取访问。 然后，您通过从组件中调度操作来管理 state，这些操作由效果器或缩减器处理，这些操作本质上是处理操作并对 state 进行更改的方法。根据我的经验，它使一切保持整洁、分离并且非常可测试。

https://github.com/mrpmorris/Fluxor

Answer 2

没有“标准”，但应用良好的编码实践（例如“单一响应原则”和清洁设计原则）会驱使您朝着某个方向前进。

我将演示文稿和 UI 代码分为三部分：

1. UI - 组件和 UI 逻辑
2. State - 您要跟踪 state 的数据。
3. 数据管理——获取、保存……

每个由一个或多个对象表示（数据管理是 MVVM 中的 ViewModel）。

您可以在此答案中看到这样的示例 - https://stackoverflow.com/a/75157903/13065781

那么问题是如何创建一个与 Form 组件作用域相同的 ViewModel 实例。 你要么：

1. Scope VM 为瞬态 - 如果子组件需要直接访问它，您可以将其级联在表单中。 这是参考示例中的方法。

2. 使用ActivatorUtilities从IServiceProvider创建一个实例，并处理表单组件中的处置。

如果 VM 实现了IDisposable/IAsycDisposable ，则您必须执行第二个操作。

以下扩展 class 向包装此功能的IServiceProvider添加了两个方法。

public static class ServiceUtilities
{
    public static bool TryGetComponentService<TService>(this IServiceProvider serviceProvider,[NotNullWhen(true)] out TService? service) where TService : class
    {
        service = serviceProvider.GetComponentService<TService>();
        return service != null;
    }

    public static TService? GetComponentService<TService>(this IServiceProvider serviceProvider) where TService : class
    {
        var serviceType = serviceProvider.GetService<TService>()?.GetType();

        if (serviceType is null)
            return ActivatorUtilities.CreateInstance<TService>(serviceProvider);

        return ActivatorUtilities.CreateInstance(serviceProvider, serviceType) as TService;
    }
}

然后你的表格看起来像这样：

public partial class UIForm: UIWrapperBase, IAsyncDisposable
{
    [Inject] protected IServiceProvider ServiceProvider { get; set; } = default!;

    public MyEditorPresenter Presenter { get; set; } = default!;

    private IDisposable? _disposable;

    public override Task SetParametersAsync(ParameterView parameters)
    {
        // overries the base as we need to make sure we set up the Presenter Service before any rendering takes place
        parameters.SetParameterProperties(this);

        if (!initialized)
        {
            // Gets an instance of the Presenter from the Service Provider
            this.Presenter = ServiceProvider.GetComponentService<MyEditorPresenter>() ?? default!;

            if (this.Presenter is null)
                throw new NullReferenceException($"No Presenter could be created.");

            _disposable = this.Presenter as IDisposable;
        }

        return base.SetParametersAsync(ParameterView.Empty);
    }

//....
    public async ValueTask DisposeAsync()
    {
        _disposable?.Dispose();

        if (this.Presenter is IAsyncDisposable asyncDisposable)
            await asyncDisposable.DisposeAsync();
    }
}