redux-pagination

Pagination utilities (action creators, higher order reducer) for redux

Usage no npm install needed!

<script type="module">
  import reduxPagination from 'https://cdn.skypack.dev/redux-pagination';
</script>

README

Redux Pagination

Pagination utilities (action creators, higher order reducer) for Redux.

Note!

The current implementation makes a lot of assumptions about your api, heavily depends on redux-thunk and this middleware! You should really look at the code before trying to use this.

Installation

npm install --save redux-pagination

API

import paginate from 'redux-pagination'
paginate(reducer)
paginate(reducer, config)

Adding pagination to your reducers

redux-pagination is a reducer enhancer (higher-order reducer), it provides the paginate function, which takes an existing reducer and a configuration object and enhances your existing reducer with pagination functionality.

To install, firstly import redux-pagination

// Redux utility functions
import { combineReducers } from 'redux'
// redux-pagination higher-order reducer
import paginate from 'redux-pagination';

Then, add paginate to your reducer(s) like this:

combineReducers({
  history: paginate(history)
})

Pagination Actions

Import the action creator init function:

import { initActionCreators } from 'redux-pagination';

Init the Action Creators

const paginationActionCreators = initActionCreators({
  limit: 30, // number of items per page
  path: '/payments' // path to the make the call to
})

Then, you can use store.dispatch() and the pagination action creators to perform pagination operations on your state:

store.dispatch(paginationActionCreators.getPage(pageNumber))

TODO

  • add tests
  • add caching
  • don't make assumptions about the api
  • don't depend on a specific client
  • don't depend on specific url params
  • don't depend on that middleware I mentioned above

License

MIT, see LICENSE.md.