求助：如何在使用Redux的React应用中实现分页功能

下面是完全自定义的分页实现步骤，涵盖Redux状态管理、组件渲染和分页导航逻辑，帮你理解底层原理：

1. 定义Action与Action Creator #

先创建分页相关的动作类型和创建函数，用于更新分页状态：

// actionTypes.js
export const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
export const SET_ITEMS_PER_PAGE = 'SET_ITEMS_PER_PAGE';
export const FETCH_ITEMS_SUCCESS = 'FETCH_ITEMS_SUCCESS'; // 对应你已有的数据获取动作

// actions.js
import { SET_CURRENT_PAGE, SET_ITEMS_PER_PAGE, FETCH_ITEMS_SUCCESS } from './actionTypes';

// 更新当前页码
export const setCurrentPage = (page) => ({
  type: SET_CURRENT_PAGE,
  payload: page
});

// 更新每页显示条数
export const setItemsPerPage = (count) => ({
  type: SET_ITEMS_PER_PAGE,
  payload: count
});

// 存储API获取的数据（你已实现的逻辑补充）
export const fetchItemsSuccess = (items) => ({
  type: FETCH_ITEMS_SUCCESS,
  payload: items
});

2. 完善Reducer逻辑 #

处理分页动作，同时保证状态更新的合法性（比如页码不能超出有效范围）：

// reducer.js
import { SET_CURRENT_PAGE, SET_ITEMS_PER_PAGE, FETCH_ITEMS_SUCCESS } from './actionTypes';

const initialState = {
  items: [],
  currentPage: 1,
  itemsPerPage: 10,
};

const listReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ITEMS_SUCCESS:
      return {
        ...state,
        items: action.payload,
        currentPage: 1 // 获取新数据后重置到第一页
      };
    case SET_CURRENT_PAGE:
      const totalPages = Math.ceil(state.items.length / state.itemsPerPage);
      // 确保页码在1到总页数之间
      const validPage = Math.max(1, Math.min(action.payload, totalPages));
      return {
        ...state,
        currentPage: validPage
      };
    case SET_ITEMS_PER_PAGE:
      // 切换每页条数时重置到第一页，避免出现空页
      return {
        ...state,
        itemsPerPage: action.payload,
        currentPage: 1
      };
    default:
      return state;
  }
};

export default listReducer;

3. 组件中实现分页渲染与导航 #

在React组件中通过useSelector获取状态，计算当前页展示的条目，再通过useDispatch触发状态更新：

// ListComponent.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setCurrentPage, setItemsPerPage } from './actions';

const ListComponent = () => {
  const { items, currentPage, itemsPerPage } = useSelector(state => state.list);
  const dispatch = useDispatch();

  // 计算当前页的条目范围
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

  // 计算总页数
  const totalPages = Math.ceil(items.length / itemsPerPage);

  // 切换页码
  const handlePageChange = (page) => {
    dispatch(setCurrentPage(page));
  };

  // 切换每页显示条数
  const handleItemsPerPageChange = (e) => {
    dispatch(setItemsPerPage(Number(e.target.value)));
  };

  return (
    <div className="list-container">
      {/* 每页条数选择器 */}
      <div className="items-per-page-selector">
        <label>每页显示：</label>
        <select value={itemsPerPage} onChange={handleItemsPerPageChange}>
          <option value={5}>5条</option>
          <option value={10}>10条</option>
          <option value={20}>20条</option>
        </select>
      </div>

      {/* 列表渲染 */}
      <ul className="item-list">
        {currentItems.map(item => (
          <li key={item.id} className="item-card">
            {/* 替换成你的列表项内容，比如{item.title}、{item.content} */}
            {item.name}
          </li>
        ))}
      </ul>

      {/* 分页导航 */}
      <div className="pagination">
        <button 
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="pagination-btn"
        >
          上一页
        </button>

        {/* 页码按钮（大数据量可优化为只显示当前页前后3个页码） */}
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
          <button
            key={page}
            onClick={() => handlePageChange(page)}
            className={`pagination-btn ${currentPage === page ? 'active' : ''}`}
          >
            {page}
          </button>
        ))}

        <button 
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="pagination-btn"
        >
          下一页
        </button>
      </div>
    </div>
  );
};

export default ListComponent;

额外优化建议 #

• 后端分页场景：如果数据量极大，无法一次性加载全部数据，需要修改action，在切换页码时传递page和itemsPerPage参数调用API，同时在state中添加totalItems（后端返回的总条数）、loading等状态字段。
• 分页导航优化：当总页数过多时，可只显示当前页前后3个页码，加上首页和尾页按钮，避免按钮堆积。
• 跳转指定页码：添加输入框，允许用户直接输入页码跳转。

内容的提问来源于stack exchange，提问作者Yash Kumar