如何处理 React / Flux 组件中的状态转换

Posted 2023-02-22

【中文标题】如何处理 React / Flux 组件中的状态转换

【英文标题】：How to handle state transitions in a React / Flux component

【发布时间】：2015-05-16 21:38:08

【问题描述】：

假设我有一个基于 AJAX 的搜索字段，它对用户输入做出反应，通过 AJAX 从后端请求搜索结果，在搜索字段下方的下拉列表中显示结果，允许通过光标键导航搜索结果并对 @ 做出反应987654322@智能按键。

由于当前基于 Backbone 的组件在很多方面都被破坏了，我想使用 React 或者 Flux 架构重新实现该搜索组件。

在规划过程中发现，我的组件至少有 10 种不同的状态（可能更多），它必须对用户输入触发的 actions 以及异步触发的 actions 做出反应服务器响应。

问题 1：我是否应该在 store 而不是父组件中建模所有状态？这意味着，每个用户输入都会更改存储状态，例如 :searchQuery、:searchResults 并且我的父视图组件会对该状态更改做出反应？

问题2：或者我应该在父组件本身中建模所有状态并完全省略store、dispatcher 和actions？

问题3：独立于处理store或父组件本身的状态，结果证明，组件本身至少可以有10种不同的状态，而且应该只有一个允许一定数量的转换。通常，我会在这里引入状态机实现，对所有:states 建模并允许:transitions 并在每次store 接收到动作或在父组件中调用回调方法时执行转换。在组件中处理 states 和 transitions 之间的这些 states 的正确 React way 是什么？

问题 4：哪个是最先进的 javascript 实现 Flux？到目前为止我见过reflux，但我不确定，那是我的毒药。

我愿意接受各种建议。

【问题讨论】：

我有一些类似的问题。我有一个在单击保存按钮之前不会保存的表单。我是否应该让组件改变其状态并仅在商店（或其他组件）需要知道时才调用操作？每次用户输入时组件是否应该通知商店？组件是否应该具有当前状态，并且存储是否应该过时，直到它应该被推送到持久性（或者需要一些更复杂的逻辑）？这会让真相的来源变得混乱吗？

【参考方案1】：

我现在正在使用flux 在React 中构建一个类似的组件，并且我过去曾与Backbone 进行过广泛的合作，因此希望我能给您一些见解。

我的猜测是，您的 Backbone 解决方案在您的搜索视图本地有一个模型，该模型在更新字段时构建了 :searchQuery。在 ajax 回调中，您很可能只是直接更新了:searchResults。

1-2：

flux 最终会产生更多样板代码，但根据我的经验，如果我不开始建立商店，我总是会后悔。话虽这么说，我会为:searchResults 创建一个SearchStore，并将:searchQuery 保持在父组件的状态。

这样，当您准备好调用搜索时，您可以使用视图操作 SearchViewActions.getSearchResults(:searchQuery) 进行 ajax 调用，并在回调中调用 SearchServerActions.receiveSearchResults(:searchQuery, :searchResults) 并更新商店。然后您的结果组件可以侦听Store 更改并在看到更改时调用SearchStore.getResults()。这有助于模块化两个子组件，其中选项 2 将紧密耦合这两个组件并使其更难用于外部组件重用。

3：

我喜欢您的状态机解决方案，您可以询问是否允许您进行转换并根据该信息返回一组要更新的属性或执行调用 setState(...) 的函数。

4：

Reflux 看起来很棒，因为它似乎大大减少了样板。然而，Reflux 的表现可能会也可能不会像股票 Flux 那样好。

让我知道进展如何，因为您的策略可能会帮助我改善结构。