App.js

import React from 'react';
import PaginatedTable from './PaginatedTable';

const App = () => (
  <div>
    <PaginatedTable perPage={5} />
  </div>
);

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import todosReducer from './reducers/todos';
import notesReducer from './reducers/notes';
import tableReducer from './reducers/table';
import moviesReducer from './reducers/movies';

const enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

const rootReducer = combineReducers({
  todosReducer: todosReducer,
  notesReducer: notesReducer,
  tableReducer: tableReducer,
  moviesReducer: moviesReducer,
});

const store = createStore(rootReducer, enhancer);
const Root = <Provider store={store}><App /></Provider>;

ReactDOM.render(Root, document.getElementById('root'));

PaginatedTable.js

import React from 'react';
import { connect } from 'react-redux';
import Table from './Table';
import Paginator from './Paginator';
// import { changePage } from './reducers/table';
import { fetchInformation } from './reducers/movies';

class PaginatedTable extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchInformation(1, this.props.perPage));
  }
  render() {
    const { total, data, perPage, dispatch } = this.props;
    // const filteredData = data.slice(
    //   (currentPage - 1) * perPage, currentPage * perPage
    // );

    // page 1
    // 0 - 1
    // page 2
    // 2 - 3
    // page 3
    // 4 - 5

    return (
      <div>
        <Table data={data} />
        <Paginator
          total={total}
          perPage={perPage}
          onItemClick={(page) => dispatch(fetchInformation(page, this.props.perPage))} />
      </div>
    );
  }
}

const mapStateToProps = state => (
  {
    currentPage: state.tableReducer.currentPage,
    data: state.moviesReducer.info,
    total: state.moviesReducer.total,
  }
);

export default connect(mapStateToProps)(PaginatedTable);

Paginator.js

import React from 'react';

const renderPage = (item, index, onItemClick) => (
  <li onClick={() => onItemClick(index + 1)} key={item}>{index + 1}</li>
);

const Paginator = (props) => {
  const pagesCount = Math.ceil(props.total / props.perPage);
  const pages = [];
  for (let i = 0; i < pagesCount; i++) {
    pages.push(i + 1);
  }

  return (
    <ul>
      {pages.map((item, index) => renderPage(item, index, props.onItemClick))}
    </ul>
  );
};

export default Paginator;

reducers-movies.js

import movies from '../movies';

const initialState = {
  info: [],
  total: movies.length
};

// Action type
const FETCH_INFORMATION = 'notes/FETCH_INFORMATION';

// Action creator
export function fetchInformation(page, perPage) {
  return {
    type: FETCH_INFORMATION,
    page: page,
    perPage: perPage,
  };
}

function reducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_INFORMATION:
      return {
        ...state,
        info: movies.slice(
          (action.page - 1) * action.perPage, action.page * action.perPage
        )
      };
    default:
      return state;
  }
}

export default reducer;

Table.js

import React from 'react';

const renderCell = (cell, index) => (
  <td key={index}>
    {cell}
  </td>
);

const renderRow = (item, index) => (
  <tr key={index}>
    {Object.keys(item).map((key) => renderCell(item[key], key))}
  </tr>
);

const Table = ({ data }) => (
  <table>
    <tbody>
      {data.map(renderRow)}
    </tbody>
  </table>
);

export default Table;