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

Question

鉴于我有用户输入反应的AJAX基于搜索字段,请求搜索结果从通过AJAX后端,示出了在下面的搜索字段下拉的结果,允许导航通过经由光标键搜索结果和反作用于esc在按键聪明的方式.

由于当前基于Backbone的组件在很多方面被打破,我想重新实现该搜索组件使用React和可能的Flux架构.

在规划期间,结果表明,我的组件至少有10个不同的状态(可能更多),它必须对actions用户输入触发做出反应,并且还要actions由异步服务器响应触发.

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

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

问题3:store事实证明,独立于处理父组件本身或其中的状态,组件本身可以具有至少10种不同的状态,并且应该只允许一定数量的转换.通常,我会在这里引入一个statemachine实现,在每次接收到一个动作时都会建模:states并允许:transitions和执行转换,store或者在父组件中调用一个回调方法.什么是正确的React way处理states和transitions它们之间states的一个组成部分？

问题4:FluxJavascript 的最新实现是哪种？到目前为止,我已经看到了反流,但我不确定,这是我的毒药.

我愿意接受各种建议.

Answer 1

我现在正在构建一个类似的组件，React并且我过去flux曾广泛使用过，所以希望我能给您一些见解。Backbone

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

1-2：

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

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

3：

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

4：

回流看起来很棒，因为它似乎大大减少了样板代码。然而，回流的性能可能会或可能不如库存Flux。

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