如何在 redux 中存储自动完成结果并做出反应

Question

我正在尝试找出如何最好地使用 react、redux 和自动完成组件。目前，我使用的是react-select。我遇到的问题是何时何地调用 API 来检索自动完成结果。

我尝试了两种方法来解决这个问题：

1. 从组件内部或通过从包装组件的容器传入的回调进行 API 调用。这对我来说很好。我想单元测试会因此变得不那么整洁。

2. 在击键时触发 redux 操作。在动作创建者中进行 API 调用。通过使用 redux-thunk 中间件，promise 被解析，并随着搜索结果引发一个新的 action，因为它是有效负载并存储在 store 的某个部分。自动完成组件一直在监听这个列表并呈现结果列表。我部分地使用了react-select，但是输入组件的状态在随后的击键中被清除了。

我正在寻找有关这两种方法的优缺点的指导，以及是否有最佳实践可供采用。

谢谢。

Answer 1

以防万一有人来到这里寻找更新。

在使用 react 几个月并积累了更多经验之后，我可以在这里提及我所走的道路。

虽然可以将自动完成结果存储在 redux 存储中，但这并没有什么优势。我确实将其作为一个实验来实现。由于这些结果对用户来说是短暂的，因此将状态存储在组件内部是完全合理的。这是我采取的最后一种方法。

顺便说一句，如果在一个页面上多次使用自动完成功能，则可能会针对搜索查询缓存结果，以减少服务器上的请求并提高客户端性能。我决定在这里使用 redux 在我的情况下跨多个自动完成实例共享数据。

我还将自动完成库从 react-select 更改为 downshift，以更好地控制自动完成的实现。

YMMY 一如既往。