reactjs - React+Redux - 管理自动完成输入的状态

Question

我有一个大型应用程序，带有一些自动完成文本输入，每次击键时都会从后端检索搜索建议。
我想保存最近的搜索查询结果，以避免在用户删除字符时对同一查询进行多次后端调用。我还想在一段时间后使这些查询过​​期，以保持搜索结果的新鲜度。
如果后端调用尚未完成该确切值，我还希望为当前文本输入提供一个 loading 指示器。

问题是 - 在哪里管理此状态以及与此状态相关的操作(下面有我需要的示例状态形状)。

在主 Redux 存储中管理它看起来有点矫枉过正 - 这种状态是一种临时中间状态，它的生命周期非常短暂(查询应该在一段时间后过期)，可能存在同一组件的许多实例在屏幕上，不同的实例可能使用不同的后端调用。
在本地 React 组件 state 对象中管理最近的搜索查询和搜索结果 - 看起来是一个很好的解决方案。

但是现在我们有了后端调用，我不想从组件内部触发这些调用，而是通过完整的 Flux 过程，使用适当的操作和 reducer ，并将结果(或错误)通过存储连接器。

所以最终，这里的东西彼此不合适 - 我不想管理主 Redux 存储中的状态，但我确实想要后端调用(其结果是该状态的主要部分) )来经历主 reducer +存储生命周期。

任何关于健壮、可维护和无需文档即可轻松计算架构的建议都值得赞赏。

该组件的每个实例所需的状态如下所示:

(假设我输入了 dog，但最后的结果还没有出现):

{     currentSearchInput: 'dog',    recentQueries: [      {        input: 'd',        isLoading: false,        results: [...]      },      {        input: 'do',        isLoading: false,        results: [...]      },      {        input: 'dog',        isLoading: true,        results: null      },    ]}

Answer 1

在我看来，使用上面提到的对象结构和组件内部状态就可以了。编写一个函数，该函数将接受通过 Redux 返回的 HTTP 请求的结果，并更新数组中相应对象的 results 字段。就我个人而言，我会将 promise 存储在结果字段中。每次调用 componentWillReceiveProps 时(由于您的reducers返回新的redux状态)，请使用setState来更新您的recentQueries。

我也会设定一个限制。 5 最近查询最大或类似的东西。

话虽这么说，我使用 Google Places API 返回地址/机构建议，但数据太小，不值得这样做。大多数结果都在 10kb 以下。

编辑:

根据我们在评论中的讨论，我建议这样做。

在输入的 onChange 处理程序中。

像平常一样将搜索条件传递给操作

在操作创建器中，返回 API 调用的结果和搜索条件

在 reducer 中

检查保存搜索调用的数组的长度(redux 存储值)。如果小于 5，则只需连接当​​前值和新值并返回。如果其值为，则用新内容覆盖数组的第 0 个位置。例如

state[0] = action.newApiResult;返回状态；