带有过滤器和排序的 Redux 分页答案

【问题标题】：Redux pagination with filter and sort带有过滤器和排序的 Redux 分页
【发布时间】：2019-11-06 17:55:34
【问题描述】：

我正在学习 redux，我想用排序和过滤属性实现分页。

这是 api 网址http://localhost:3001/cars?manufacturer=Fiat&color=white&sort=asc&page=1

还有制造商列表http://localhost:3001/manufacturers

因为最初所有的下拉菜单都将具有默认值并且页面将是1 将有多个减速器来获取制造商、颜色和汽车。

  //fetchManufacturerReducer
    const initialState = {
        manufacturers:[]
    };

  //fetchCarsListReducer
    const initialState = {
      manufacturers:"Fiat",
      color:"Black",
      data:{
        cars:[],
        currentPage:1,
        totalPage:10
      }
   };

问题：

这是正确的做法吗？
如何控制请求的顺序 - 首先获取制造商列表、颜色列表，然后获取带有默认值的汽车列表和页面 1
当用户将颜色更改为Black 时，我如何更改color activeColor 以调度新的fetchCarsList？
在某些阶段，我必须在减速器之间共享状态，这似乎很难做到 - 将所有内容放在单个减速器中会更好？

【问题讨论】：

Redux 在你组织你的 reducer 时效果最好，因为它们不需要在它们之间共享太多数据，即，做然后服务于单一目的是最好的情况。我无法真正回答您的问题，因为即使经过仔细检查，所呈现的结构似乎也很难得到。
是的，基本上目标是构建 api url - 基于过滤器和排序值在多个页面中获取汽车。通过使用具有多个操作的单个减速器，它应该可以工作，但我不确定它是否是最佳实践。

标签： reactjs filter redux pagination react-redux

【解决方案1】：

Redux 是关于存储/更改您的数据（状态）并轻松访问它 - 如果感觉不容易 - 您需要更改 reducer 的组成，但是如果您只是从 redux 开始，一切都会发生）

TLDR：

让我试着按相反的顺序回答

将所有内容都放在一个 Reducer 中会更好吗？

我曾与刚开始使用 redux 的队友合作，并提出了将所有过滤/排序逻辑保存在一个巨大的（超过 700 loc）reducer 中的想法。时间和功能来来去去，后来很明显，在巨大的减速器中，每次新动作到来时管理大量道具有很大的缺点，当它开始成长时，这被证明是一个非常容易出错的错误。

还有一个巨大的减速器的缺点是团队中的其他人难以理解。

当用户将颜色更改为黑色时，我如何更改颜色 activeColor 以调度新的 fetchCarsList？

您不能在 reducer 之间分派数据更改。但是您可以通过将适当的操作分派给多个减速器来实现您想要的

如何控制请求的顺序 - 首先获取制造商列表、颜色列表，然后获取带有默认值和页面的汽车列表

Redux 是关于保留数据 - reducer 是关于借助操作的突变数据，而不是关于基于数据或获取数据的业务逻辑）

这是正确的做法吗？

最好的方法之一是获得一个不会让您提出问题 (3) (4) 的解决方案，因为这些问题加在一起表明 reducer（和数据！）的组合不正确。

我不能给你更多建议，因为组合非常很大程度上取决于数据的访问方式，但是你可以从你拥有的东西开始，然后在你看到你的重复模式后改变它访问/更改数据。

【讨论】：

【解决方案2】：

如果您的应用在其他地方重复使用制造商和颜色的数据。将这两个数据放在全局存储（redux）中是有意义的。否则，不要将其存储在组件的本地状态中。
使用承诺

Promise.all(getManufactures(), getColors()).then([manufactures, colors] => { getCars（制造商，颜色）） }
分离调用API（getCars）的逻辑，使用eventHandler调用该逻辑onColorChange,onManufactureChange
在过滤时使用本地状态来处理数据，因为您可能不会在任何其他地方使用此数据。

【讨论】：