reactjs、redux 和分页答案

【问题标题】：reactjs, redux and paginationreactjs、redux 和分页
【发布时间】：2018-04-29 18:45:23
【问题描述】：

我有一个 api 端点，它提供了一系列成分。每种成分具有以下属性：id、名称、测量单位、密度（kg/lt）、成本/测量单位。我有几千种成分，并且可以不断增加。

我正在从我的后端服务器接收具有可变页面大小的分页 API。

http://yoursite.com/api/ingredients?page=1&page_size=200

在客户网站上，如何将我的状态形状 w.r.t 组织为 page 和 page_size 和 ingredients。

在客户端，我希望每页仅显示 15-20 个项目。那么如何通过分页确保项目正确显示。

同样，我还有一些类似的成分。例如：食谱、用户等。

redux 能否处理如此大的数据。

【问题讨论】：

我不知道我是否理解这个问题。用page、page_size 和ingredients 字段设计你的状态有什么问题？ ingredients 将只包含当时显示的成分。
所以对于每个页面，我必须将成分存储在一个单独的对象内部状态中。你知道关于 git 的任何例子吗？
客户端如何知道总页数。
您可以在成分响应中包含pages_count

标签： reactjs pagination redux

【解决方案1】：

你的成分反应可能是这样的：

GET http://yoursite.com/api/ingredients?page=1&page_size=15

{
    pages_count: 50,
    page: 1, 
    ingredients: [
        //first 15 ingredients
    ]
}

您的初始应用程序状态将是：

{
    pages_count: 50,
    page: 1,
    page_size: 15,
    ingredients: [ 
        //first 15 ingredients
    ]
}

当用户单击Page 2 按钮（或Next Page 或其他）时，您会像这样调度异步操作：

const changePage = (page) => (dispatch) => {
    doGet(`http://yoursite.com/api/ingredients?page=${page}&page_size=15`)
      .then(res => {
          dispatch(retrieveIngredients(res.ingredients, page));
      });
}

retrieveIngredients 是动作创建者：

const retrieveIngredients = (ingredients, page) => {
    return {
        type: 'retrieve_ingredients',
        ingredients,
        page
    };
}

然后，处理retrieve_ingredients 动作的reducer 将其状态更新为：

{
    page: action.page,
    ingredients: action.ingredients
}

在您的IngredientsList 组件（或类似的东西，我猜）中，您将只显示列表state.ingredients。此外，您的 PageSelector 将显示从 1 到 state.pages_count 的页面按钮。

【讨论】：