Datatables.net: Correct serverside pagination with React Redux

I have a react component that makes a request to an API using redux. This request performs a server-side pagination.

The problem is I don't understand how to perform this pagination in datatables.net using redux.

I do know how to perform a pagination without datatables (actually, my component is performing it) and datatables has a ajax support, as the react-redux-datatable package. Both perform directs call to API through ajax, that is not the case of using redux.

import React, { useEffect, useState, useCallback } from 'react'
import { bindActionCreators } from 'redux'

//...

const [skip, setSkip] = useState(10)
const [page, setPage] = useState(0)

// offset = 0 to page 0, offset 10 to page 1, offset 20 to page 2 and so on
<button onClick={() => props.doList({ offset: page * skip  })}>Request</button>

// Table shows the current 10 entries, from a max that is also 10.
<Table data={props.list} columns={predefinedColums}>

//...

// results are acessed by props.list
const mapStateToProps = (state) => {
    return ({
        list: state.reducer.list,
    })
}

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            doList,
        },
        dispatch
    )

Currently, I can show the desired results, but don't know how to perform new calls on page change in the datatable component. The pagination API is working, so if I change manually the page number, it returns the correct entries.

//Table component

import React, { useEffect } from 'react'
import $ from 'jquery'
import 'datatables.net'
import 'datatables.net-responsive'
import 'datatables.net-select'

// other imports

function Table(props) {
    const { columns, data, title } = props

    useEffect(() => {
        $('#table_id').DataTable().destroy()
        $('#table_id').DataTable({
            retrieve: true,
            data,
            columns,
            "responsive": true,
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            "language": {
                "emptyTable": i18n.t('emptyDataSourceMessage'),
                "paginate": {
                    "previous": i18n.t('Previous'),
                    "next": i18n.t('Next'),
                    "first": i18n.t("First"),
                    "last": i18n.t("Last"),
                },
                "infoFiltered": i18n.t("(filtered from _MAX_ total entries)"),
                "search": i18n.t('Search'),
                "info": i18n.t("Showing _START_ to _END_ of _TOTAL_ entries"),
                "infoEmpty": i18n.t("Showing 0 to 0 of 0 entries"),
            },
        })
    }, [columns, data])

    return (
        <div className="row">
            <div className="col s12">
                <div class="section section-data-tables">
                    <div className="card">
                        <div className="card-content">
                            <h4 className="card-title">{title}</h4>
                            <div className="row">
                                <div className="col s12">
                                    <table id="table_id" className="display">
                                        <thead>
                                            <tr>
                                                {columns.map((column, key) => <th key={key} data-field={column.field}>{column.title}</th>)}
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                {columns.map((column, key) => <th key={key} data-field={column.field}>{column.title}</th>)}
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Table

The table looks like: (showing 10 results of 10 and only page)

I would like to know how to perform a server side pagination correctly with redux. Is currently possible to know the number of entries and also the current page to be displayed.

from Datatables.net: Correct serverside pagination with React Redux