使用 Redux 和材质 UI 处理分页

Question

我在完成桌子上的分页时遇到了一些问题。

这是我的表：

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Username</TableCell>
            <TableCell>Log level</TableCell>
            <TableCell>Date</TableCell>
            <TableCell>Message</TableCell>
            <TableCell>Details</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        { this.props.logs.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((el,ix) => (
        <TableRow key={ix}>
            <TableCell>{el.username}</TableCell>
            <TableCell>{el.logLevel}</TableCell>
            <TableCell>{el.createdTime}</TableCell>
            <TableCell>{el.message}</TableCell>
            <TableCell>{el.details}</TableCell>
        </TableRow>
        ) )}
    </TableBody>
    <TableFooter>
        <TableRow>
            <TablePagination component="div" count= {this.props.logs.length}
                rowsPerPage={this.props.rowsPerPage}
                page={this.props.page}
                onChangePage={this.handleNextPageClick}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
             />
        </TableRow>
    </TableFooter>
</Table>

我已经设置了句柄NextPageClick函数以在onChangePage上执行，这是函数：

handleNextPageClick(){
    this.props.dispatch(nextPage(this.props.page))
}

功能也已经在顶部导入...

这是我对 redux 的操作：

export function nextPageClick(page){
    type: LOGS_NEXTPAGECLICK_PAGINATION,
    page
}
export function nextPage(currentPage){
    return dispatch => {
        currentPage = currentPage + 1;
        dispatch(nextPageClick(currentPage));
    }
}

这是我处理状态的化简器：

export default function logsStore(state = defaultState, action) {
    switch(action.type) {
        case actions.LOGS_NEXTPAGECLICK_PAGINATION:
            return { ...state, page: action.page}
            break;
        default:
        return state;
    }
}

Reducer 有很多情况，但与问题无关的代码太多。

因此，当我尝试在导航上选择下一页按钮时，出现此错误：

×类型错误： 无法读取未定义的属性"符号(调用 API(">

Answer 1

我对 redux 的操作没有返回锁，现在它可以工作：

export function nextPageClick(page){
    return
    {
       type: LOGS_NEXTPAGECLICK_PAGINATION,
       page
    };
}