如何在 react-redux 中实现过滤或搜索？答案

【问题标题】：How to implement filter or search in react-redux?如何在 react-redux 中实现过滤或搜索？
【发布时间】：2018-09-09 16:27:03
【问题描述】：

我是 react-redux 的新手。

场景：在应用加载时，我从后端获取 10 个项目的列表到 redux。现在说，我应用了一个过滤器，它从 redux 获取结果并显示 3 个项目，但后端还有 10 个项目。那么我如何显示这 10 个项目呢？

每当用户应用过滤器时，我是否应该从 api 获取数据？如果是，那么 redux 在这里有什么好处？

【问题讨论】：

当您说后端还有 10 个项目时，是您提取的原始 10 个项目还是要提取的 10 个新项目？
10 个新项目...在应用过滤器后获取。后端有 100 个项目..我最初获取了 10 个项目...然后我应用过滤器过滤这 10 个项目并显示 3 个项目....但这对用户来说是不完整的结果...因为有更多基于此的项目在 dabase 中过滤，但在 redux 中不过滤。
10 个新项目.. 例如。我在数据库中有 100 个用户。我最初获取了 10 个用户（其余 90 个用户将在滚动或分页时显示。）我应用一个过滤器说.. 25 岁的用户。这导致 3 个 25 岁的用户。但结果来自redux，所以它不完整。其余 90 个用户未在此处过滤。我如何也显示这 90 个用户的结果...？

【解决方案1】：

Redux 是 JavaScript 应用程序的可预测状态容器，因此假设您有 10 个组件需要以一种或另一种方式使用您的数据；一个用于计算总数，另一个用于显示最后 5 个等...使用 redux，您只需从任意点更新您的状态，所有组件都会根据变化进行响应。

场景一：Facebook 有一个组件显示消息列表，另一个组件显示您的未读消息列表，另一个组件在刚刚向您发送消息的朋友旁边有一个徽章这表示新消息...而不是每个组件都必须使用 redux 单独获取这些数据，您可以一次获取所有内容并将其传递到正确的位置。

场景二：假设您的一个组件有一个输入字段，一旦您在其中写了一条消息，您希望您的其他组件以某种方式做出反应。使用 redux，您只需将数据传递到您的 reducer，它就会被委托给您的所有组件。

如何在 react-redux 中实现过滤或搜索？

要回答您的问题，这实际上取决于您的应用程序的类型和大小，但我通常在组件中而不是在 reducer 中实现过滤器。

【讨论】：

我理解你关于 redux 的概念。我的问题是 .. 我总共有 10 个项目说 redux 中的用户，并在应用过滤器后显示 10 个用户中有 3 个用户......（通过在组件中实现过滤器)....它的速度很快....但它的结果并不完整，因为数据库有更多的用户用于该过滤器，而这些用户还不是 redux。那么我将如何从后端显示更多用户......？
如果您的问题是关于如何加载数据：我通常会调度在 componentDidMount 中加载数据的操作，一旦它们在我的减速器中，我就不会改变它们。所以我的减速器有 10 个用户，我只显示 3 个。
如果你的 reducer 有 10 个用户，并且我应用了一个过滤器，该过滤器根据姓名首字母 P 过滤用户，这将仅显示这 10 个用户的结果。但是后端有 100 个用户。我也想要那里的结果。
所以你的问题是，如果你有 100 万用户并最初从数据库中获取最后 10 个用户，然后按姓氏 smith 无限制过滤，它将如何工作。
如果这不是一个 redux 工作，redux 工作是帮助你的所有组件表现/与相同的数据交互......你需要在 API 级别处理它，如果你想查找 GraphQL要酷:)