前言：redux-pagination 是一款用于 React 应用的分页管理库。它可以帮助你轻松管理分页逻辑，提高开发效率。在本文中，我们将介绍如何使用 redux-pagination。
安装
要使用 redux-pagination，首先需要使用 npm 或 yarn 安装它。
npm install redux-pagination
或
yarn add redux-pagination
使用
在 React 应用中，我们需要使用 react-redux 将 redux 和 React 连接起来。在使用 redux-pagination 之前，你需要先确保你已经配置好了 redux 和 react-redux。
1. 定义 reducer
redux-pagination 的核心是用于管理分页状态的 reducer。以下是一个简单的 reducer 示例：
import { combineReducers } from 'redux'
import { createPaginationReducer } from 'redux-pagination'
const paginationReducer = createPaginationReducer('myPagination')
export default combineReducers({
myPagination: paginationReducer
})我们使用 combineReducers 将 redux 的多个 reducer 组合成一个。在上面的代码中，我们从 redux-pagination 中导入 createPaginationReducer 函数，该函数会创建一个名为 myPagination 的分页 reducer。
2. 定义 action
接下来，我们需要定义用于分页的 action。redux-pagination 预定义了以下几个分页 action：
- setPage(page): 设置当前分页页码。
- setPageSize(pageSize): 设置分页大小。
- setTotal(total): 设置数据总量。
- setItems(items): 设置当前页数据。
需要在 reducer 中，对 action 做出相应的处理。
3. 在组件中使用
在组件中使用 Redux Store 中的分页数据，需要使用 react-redux 的两个关键组件：Provider 和 connect。
Provider 组件使你的整个 React 组件树都可访问 Redux Store，而 connect 函数则用于连接组件到 Store。
首先，在组件所在的文件中导入 Provider 和 createStore 函数。createStore 函数将在下一步中用于创建分页 Store。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'接下来，在组件所在的文件中创建 Redux Store。可以使用 createStore 函数，将 rootReducer 传递给它来创建 Store。Redux Store 是应用状态的集中化管理器。
const store = createStore(rootReducer)
接下来，使用 Provider 组件将 Store 绑定到 React 组件树的顶层。这样，组件树中的每个组件都可以通过 connect 函数连接到 Store。
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)最后，使用 connect 函数连接组件到 Store。我们先定义 mapDispatchToProps 函数，它将用于将 dispatch 函数传递给组件。我们希望组件可以分发 setPage 和 setPageize 两个 action。
const mapDispatchToProps = {
setPage,
setPageSize
}
export default connect(null, mapDispatchToProps)(MyComponent)在 MyComponent 组件中，我们现在可以像这样使用 props 来读取和更新分页状态：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
----- - ----- --------- -------- ----------- - - ----------
------ -
-----
------- ----------- -- ------------ - -------- -------------
------- ----------- -- -------------------- - -------- ---- -------------
------
-
-
-示例代码
以下是一个简单的示例，展示了如何使用 redux-pagination 来分页显示数据。
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- ------- - ---- -------------
------ - ------------ --------------- - ---- -------
------ - ------------------------ -------- ----------- - ---- ------------------
----- ----- - ---------------------------------- -- -- --- - - -- ----- ----- --- - --- ---
----- ----------- - ------ - ------ ------- -- -----
----- ----------------- - ---------------------------------------
----- ----------- - -----------------
------ ------------
------------- -----------------
--
----- ----- - ------------------------
----- ------------------ - -
--------
-----------
-
----- --------------- - ----- -- --
------ ------------
----- ------------------------
--------- ---------------------------
--
----- --- ------- --------------- -
-------- -
----- - ------ ----- --------- -------- ----------- - - ----------
------ -
-----
----
--------------------- - ----- - --- -------- - -------------- -- -
--- ------------------------------
---
-----
-----
------- ----------- -- ------------ - --- -------------- --- ---
----
---------
------- ----------- -- ------------ - --- -------------- --- ---------------------- - -----------
----
---------
------- ----------- -- -------------------- - -------- ---- -------------
------
------------------------------ - ----------
-------
------
------
-
-
-
------ ------- ------------------------ ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
-在这个示例中，我们定义了一个 items reducer，它返回一个包含 30 个项（使用 Array.from 和 Array.keys）的数组。我们还定义了一个名为 myPagination 的分页 reducer。
在组件中，我们使用 connect 函数将组件连接到 Redux Store。我们可以使用 setPage 和 setPageSize 分发 action。同时，我们也将从 Store 中读取页码、页大小和数据。我们使用 items.slice 从数据中提取了适当的切片进行渲染。最后，我们添加了两个 Prev 和 Next 按钮来更改当前页。并且，我们也展示了当前页码和总页数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8c84