Javascript 如何处理反应/通量组件中的状态转换

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

esc

键做出反应

由于当前基于主干网的组件在许多方面被破坏，我想使用

React

和

Flux

架构重新实现该搜索组件

在计划过程中，我的组件至少有10种不同的状态（可能更多），它必须对由用户输入触发的

操作作出反应，以及对由异步服务器响应触发的
操作作出反应

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

问题2：或者我应该对父组件本身的所有状态进行建模，并完全省略
存储
、
调度程序
和
操作

问题3：与
存储
或父组件本身中的处理状态无关，组件本身至少可以有10种不同的状态，并且应该只允许一定数量的转换。通常，我会在这里引入一个状态机实现，对所有
:states
和allowed
:transitions
进行建模，并在
存储
接收到操作或在父组件中调用回调方法时执行转换。处理组件中这些
状态之间的
状态和
转换的正确
反应方式是什么

问题4：哪一种是Javascript的最新实现？我已经看过了，但我不确定，那是我的毒药

我愿意在这里接受各种建议。
我现在正在用
flux
在
React
中构建一个类似的组件，过去我与
Backbone
进行了广泛的合作，希望能给大家一些启示

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

1-2:

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

这样，当您准备好调用搜索时，您可以使用查看操作
SearchViewActions.getSearchResults（：searchQuery）
进行ajax调用，并在回调调用
SearchServerActions.receiveSearchResults（：searchQuery，：searchResults）
中更新存储。然后，结果组件可以侦听
Store
更改，并在看到更改时调用
SearchStore.getResults（）
。这有助于模块化两个子组件，其中as option2将两个组件紧密耦合，使外部组件重用变得更加困难

3:

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

4:

看起来很棒，因为它似乎减少了很多样板文件。然而，回流的性能可能会或可能不会与库存
流量一样好

请告诉我进展如何，因为您的策略可能会帮助我改进结构。
我有一些类似的问题。我有一个表单，只有单击“保存”按钮才能保存。我是否应该让组件改变其状态，并且仅在存储（或其他组件）需要知道时调用操作？组件是否应该在用户每次输入时通知存储？组件是否应该具有当前状态，并且在将其推送到持久化（或者需要更复杂的逻辑）之前，存储是否应该过时？这会让真相的来源变得混乱吗？