在 Blazor WebAssembly 中,让状态容器管理 API 调用并不违反最佳实践,取决于具体的情况。如果你在应用程序中使用了 Redux、Flux 或其他类似的状态管理方案,那么让状态容器管理 API 调用可能是更好的选择。
下面是一个简单的示例,演示了如何使用状态容器管理 API 调用。假设我们有一个 Todo 应用程序,可以从后端 API 加载和保存 Todo 列表。我们可以使用 Blazor 组件的生命周期方法来触发 API 调用,然后将数据存储在状态容器中。在这个示例中,我们使用了 Blazor WebAssembly 的自带状态容器。
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
public class Todo
{
public int Id { get; set; }
public string Text { get; set; }
public bool Completed { get; set; }
}
public class TodoState
{
public List Todos { get; set; }
}
public class TodoActions
{
private readonly HttpClient _httpClient;
public TodoActions(HttpClient httpClient)
{
_httpClient = httpClient;
}
public async Task LoadTodosAsync()
{
var todos = await _httpClient.GetFromJsonAsync>("api/todos");
AppState.Instance.SetValue(state => state.Todos = todos);
}
public async Task SaveTodosAsync(List todos)
{
await _httpClient.PostAsJsonAsync("api/todos", todos);
AppState.Instance.SetValue(state => state.Todos = todos);
}
}
public static class AppState
{
private static TodoState _state = new TodoState();
public static event Action OnChange;
public static void SetValue(Func func)
{
var newState = func(_state);
if (!EqualityComparer.Default.Equals(newState, _state))
{
_state = newState;
NotifyStateChanged();
}
}
public static TodoState GetValue()
{
return _state;
}
private static void NotifyStateChanged() => OnChange?.Invoke(_state);
}
在上面的代码中,我们定义了一个 TodoState
类,包含一个 Todo 的列表。我们还定义了一个 TodoActions
类,负责从 API 加载和保存 Todo。