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

Question

鉴于我有一个基于 AJAX 的搜索字段，它对用户输入使用react，通过 AJAX 从后端请求搜索结果，在搜索字段下方的下拉列表中显示结果，允许通过光标键在搜索结果中导航并在 esc 上使用react以智能方式按键。

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

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

问题 1:我应该在 store 而不是父组件中对所有状态建模吗？这意味着，每个用户输入都会更改存储状态，例如 :searchQuery 、 :searchResults 和我的父 View 组件会对该状态更改使用react吗？

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

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

问题 4:哪个是 Javascript 的最先进的 Flux 实现？到目前为止我已经看到 reflux，但我不确定，那是我的毒药。

我愿意接受这里的各种建议。

Answer 1

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

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

1-2:

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

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

3:

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

4:

Reflux看起来很棒，因为它似乎大大减少了样板文件。然而，Reflux 的性能可能与库存 Flux 一样好，也可能不如。

请告诉我进展如何，因为您的策略可能会帮助我改进我的结构。