MUI 分页器

React\airbib\src\views\entire\c-cpns\entire-pagination\index.jsx

import React, { memo } from 'react'
import Pagination from '@material-ui/lab/Pagination';

import { PaginationWrapper } from './style'
import { useDispatch, useSelector } from 'react-redux';

const EntirePagination = memo(() => {
	
	const {totalCount, currentPage, roomList} = useSelector((state)=>({
		totalCount:state.entire.totalCount,
		currentPage:state.entire.currentPage,
		roomList:state.entire.roomList
	}))
	const startCount = currentPage * 20 + 1
	const endCount = (currentPage + 1) * 20
	// 处理分页逻辑
	const dispatch = useDispatch()
	function pageChangeHandle(event,pageCount) {
		dispatch(fetchRoomListAction(pageCount - 1))
	}
	return (
		<PaginationWrapper>
			{
				!!roomList.length && (
				<div className='info'>
					<Pagination count={totalCount} onChange={pageChangeHandle}/>
					<div className='desc'>
						第 {startCount} - {endCount} 个房源，共超过{totalCount}个
					</div>
				</div>
				)
			}
				
		</PaginationWrapper>
	)
})

export default EntirePagination

React\airbib\src\views\entire\c-cpns\entire-pagination\style.js

import styled from "styled-components";

export const PaginationWrapper = styled.div`
    display: flex;
    justify-content: center;

    .info{
        display: flex;
        flex-direction: column;
        align-items: center;
        .MuiPaginationItem-icon{
                font-size: 24px;
        }
        .MuiPaginationItem-page{
                margin: 0 9px;
                &:hover{
                        text-decoration: underline;
                }	
        }
        .MuiPaginationItem-page.Mui-selected{
                background-color: #222;
                color: #fff;
        }
    }
`

在请求这里 处理页码 React\airbib\src\store\moudles\entire\actionCreaors.js

import { getEntireRoomList } from "@/services/modules/entire"
import * as actionTypes from "./constants"

export const changeCurrentPageAction = (currentPage) => ({
	type:actionTypes.CHANGE_CURRENT_PAGE,
	currentPage
})

export const changeRoomListAction = (roomList) => ({
	type:actionTypes.CHANGE_ROOM_LIST,
	roomList
})


export const changeTotalCountAction = (totalCount) =>({
	type:actionTypes.CHANGE_TOTAL_COUNT,
	totalCount
})

// 新的函数 请求接口

export const fetchRoomListAction = (page = 0) =>{
	// return async (dispatch, getState) => {
	return async (dispatch) => {
		// 0 修改currentPage
		dispatch(changeCurrentPageAction(page))
		
		// 1. 根据页码获取最新的数据
		// const currentPage = getState().entire.currentPage
		const res = await getEntireRoomList(page * 20)
	
		// 2. 获取到最新的数据，保存redux的store中
		const roomList = res.list
		const totalCount = res.totalCount
		dispatch(changeRoomListAction(roomList))
		dispatch(changeTotalCountAction(totalCount))
	}
}