使用过滤器和排序进行Redux分页

Question

我正在学习redux，我想用sort和filter属性实现分页。

这是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. 这是正确的方法吗？

2. 我如何控制请求的顺序-首先获取制造商，颜色列表，然后获取具有默认值和页面1的carsList

3. 当用户将颜色更改为Black时，如何更改color activeColor来调度新的fetchCarsList？

4. 在某个阶段，我将不得不在减速器之间共享状态，这似乎很难做到-将所有内容都放入单个Reducer 吗？

Answer 1

Redux就是关于存储/更改数据（状态）并易于访问的-如果感觉不容易-您需要更改reducer的组成，但是如果您只是从redux开始就可以了）

TLDR ：

让我尝试以相反的顺序回答

  

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

我曾与刚开始使用redux的队​​友一起工作过，并想到将所有过滤/排序逻辑保存在一个巨大的（超过700 loc）减速器中。时间和功能来去去去，后来很明显，在大型的reducer中，每次新动作到来时管理大量道具的弊端很大，当它开始长大时，它很容易出错。

具有巨大的减速器也具有团队其他人难以理解的缺点。

  

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

您不能在化简器之间分派数据更改。但是您可以通过将适当的动作调度到多个reducer来实现所需的目标

  

  
1. 我如何控制请求的顺序-首先获取制造商，颜色列表，然后获取具有默认值和页面的carsList
  

Redux与保留数据有关-简化器与在操作帮助下的变异数据有关，而不是与基于数据或获取数据的业务逻辑有关

  

  
1. 这是正确的方法吗？
  

一种好的方法是得到一个不会让您问问题（3）（4）的解决方案，因为这些问题加在一起表明减速器（和数据！）的构成不正确。

我不能再建议您，因为组合非常非常取决于数据的访问方式，但是您可以从拥有的内容着手，等到您看到重复的模式后再进行更改访问/更改数据。

Answer 2

1. 如果您的应用在其他地方重复使用了制造商和颜色的数据。将这两个数据放入全局存储区（redux）是有意义的。否则，请勿将其存储在组件的本地状态。

2. 使用承诺

   Promise.all（getManufactures（），getColors（））。then（[制造商，颜色] => {   getCars（制造，颜色） }

3. 分隔调用API的逻辑（getCars），使用eventHandler调用该逻辑onColorChange，onManufactureChange

4. 在过滤时使用本地状态处理数据，因为您可能不会在其他任何地方使用此数据。