c# - 与 3 个子组件共享状态和处理事件 |通量器

Question

我是 Fluxor 和它所基于的 redux/flux 模式的新手。我目前正在从事 Blazor wasm 项目。
我选择使用fluxor进行状态管理。但我想知道如何处理以下情况:

当页面被加载时，组件 1 会通过 Fluxor 状态管理填充来自 API 的数据。

组件 1 是一个列表，其中包含用户可以选择的项目。单击该项目时，应从 API 检索并在组件 3 中完整显示。表示事件项目的文本显示在组件 2 中。

组件 2 是一个导航器，它使用简单的后退和下一步按钮浏览列表。单击下一步时，组件 3 应从 API 检索下一个项目并完整显示该项目。然后，组件 1 通过显示选择了列表的哪个项目来反射(reflect)此更改。



我确实有行动等来获得完整的项目。我只是不确定从哪里发送它。或者如何确保所有组件都知道事件项目是什么。使用“纯” blazor，我将通过事件回调来完成所有这些，并在本地处理事件项目状态。但这会破坏通量器的意义。

Answer 1

如果这些组件都是单个用例的不同部分(用于浏览客户端数据)，那么我会将它们全部放在一个功能中。

假设您有以下来自您的 API 的契约(Contract)类。

public class ClientSummary
{
  public Guid ID { get; set; }
  public string Name { get; set; }
}

public class ClientDetails
{
  public Guid ID { get; set; }
  public string Name { get; set; }
  public string LotsOfOtherInfo { get; set; }
  public string ArchivedInfo { get; set; }  
}

备注 :我个人会给他们私有(private) setter 并使用 Newtonsoft 反序列化 API 响应。这将确保它们是不可变的，并且您可以直接在状态中使用它们，而无需创建孪生类来使您的状态不可变。

您的功能状态可能看起来像这样

public class MyUseCaseState
{
  public bool IsLoadingList { get; }
  public ReadOnlyCollection<ClientSummary> Summaries { get; }
  public int SelectedClientIndex { get; }

  public bool IsLoadingDetails { get; }
  public ClientDetails ClientDetails { get; }

  public MyUseCaseState(
    bool isLoadingList, 
    IEnumerable<ClientSummary> summaries, 
    int selectedClientIndex, 
    bool isLoadingDetails, 
    ClientDetails clientDetails)
  {
    IsLoadingList = isLoadingList;
    Summaries = (summaries ?? Enumerable.Empty<ClientSummary>()).ToList().AsReadOnly();
    SelectedClientIndex = selectedClientIndex;
    IsLoadingDetails = isLoadingDetails;
    ClientDetails = clientDetails;
  }
}

显示页面时触发的操作不需要任何有效负载

public class LoadClientListAction {}

reducer 将清除列表并将索引设置为 -1；

[ReducerMethod]
public static MyUseCaseState ReduceLoadClientListAction(MyUseCaseState state, LoadClientListAction action)
=> new MyUseCaseState(
     isLoadingList: true,
     summaries: null,
     selectedClientIndex: -1,
     isLoadingDetails: false,
     clientDetails: null
   );

您的效果将转到服务器以获取列表，然后通过操作推送到状态

[EffectMethod]
public async Task HandleLoadClientListAction(LoadClientListAction action, IDispatcher dispatcher)
{
  ClientSummary[] clientSummaries = await GetFromApi.....;
  ClientSummary firstClient = clientSummaries.FirstOrDefault();
  var result = new LoadClientListResultAction(clientSummaries, firstClient);
  dispatcher.Dispatch(result);
}

此操作的 reducer 方法

[ReducerMethod]
public static MyUseCaseState ReduceLoadClientListResultAction(MyUseCaseState state, LoadClientListResultAction action)
=> new MyUseCaseState(
     isLoadingList: false,
     summaries: action.Summaries,
     selectedClientIndex: action.Summaries.Count == 0 ? -1 : 0,
     isLoadingDetails: false,
     clientDetails: action.FirstClient
   );

现在您需要为所选客户端加载数据，只要 SelectedClientIndex更改，或列表加载。您可以有一个操作来设置选定的索引。

@inject IState<MyUseCaseState> MyUseCaseState

Dispatcher.Dispatcher(new SelectIndexAction(MyUseCaseState.Value.SelectedClientIndex + 1));

您现在可以将 IsLoadingDetails 设置为 true，使用效果从服务器(ClientDetails)获取数据，然后从服务器分派(dispatch)结果以更新您的状态。

[ReducerMethod]
public static MyUseCaseState ReduceSelectIndexAction(MyUseCaseState state, SelectIndexAction action)
=> new MyUseCaseState(
     isLoadingList: state.IsLoadingList,
     summaries: state.Summaries,
     selectedClientIndex: action.SelectedIndex,
     isLoadingDetails: true,
     clientDetails: null
   );

获取数据的效果

[EffectMethod]
public async Task HandleSelectIndexAction(SelectIndexAction action, IDispatcher dispatcher)
{
  ClientDetails details = await GetFromYourApi....
  var result = new SelectIndexResultAction(details);
  dispatcher.Dispatch(result);
}

然后最后更新你的状态

[ReducerMethod]
public static MyUseCaseState ReduceSelectIndexAction(MyUseCaseState state, SelectIndexResultAction action)
=> new MyUseCaseState(
     isLoadingList: state.IsLoadingList,
     summaries: state.Summaries,
     selectedClientIndex: state.SelectedIndex,
     isLoadingDetails: false,
     clientDetails: action.ClientDetails
   );