时间戳

首页 > 解决方案 > 带有过滤器和排序的 Redux 分页

reactjs - 带有过滤器和排序的 Redux 分页

问题描述

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

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

  3. 当用户将颜色更改为Black我如何更改coloractiveColor 以发送新的fetchCarsList？

  4. 在某个阶段，我必须在减速器之间共享状态，这似乎很难做到 - 将所有内容放在单个减速器中会更好吗？

标签： reactjsfilterreduxpaginationreact-redux

解决方案

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

TLDR：

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

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

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

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

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

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

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

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

  1. 这是正确的方法吗？

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

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

推荐阅读