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

Question

我有一个大型应用程序，其中包含一些自动填充文本输入，可在每个按键行程中从后端检索搜索建议。
我想保存最近的搜索查询结果，以避免在用户删除字符时对同一查询进行多次后端调用。我还希望在一段时间后使这些查询失效，以保持搜索结果的新鲜度 如果后端调用尚未针对该确切值完成，我还希望为当前文本输入设置loading指示符。

问题是 - 在哪里管理这个状态以及与此状态相关的操作（下面我有一个我需要的样本状态形状）。

在Redux主存储中管理它看起来像是一种过度杀伤 - 这种状态是一种临时中间状态，它很短暂（查询应该在一段时间后过期），可能有很多实例屏幕上显示相同的组件，不同的实例可能使用不同的后端调用 在本地React Component state对象中管理最近的搜索查询和搜索结果 - 看起来像一个很好的解决方案。

但现在我们有后端调用，我不想从组件中触发，但是通过完整的Flux进程，使用适当的操作和减少器并将结果（或错误）传递给道具通过商店连接器。

所以最终，这里的事情并不适合彼此 - 我不想在Redux主要商店管理状态，但我确实想要后端电话（其结果是主要的）该状态的一部分）通过主减速器+存储生命周期。

对于强大的，可维护的和易于计算的无文档架构的任何建议表示赞赏。

我对此组件的每个实例所需的状态如下所示：

（让我说我输入了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字段。就个人而言，我会在结果字段中存储承诺。每次componentWillReceiveProps被调用（由于你的reducer返回新的redux状态），使用setState来更新你的recentQueries。

我也设定了限制。 5最近查询max或类似的东西。

话虽这么说，我使用google places API来返回地址/建立建议，而且数据太小，不值得这样做。大多数结果都低于10kb。

编辑：

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

在输入的onChange处理程序中。

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

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

在减速机中

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

state[0] = action.newApiResult; return state;