Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vhpoet/redux-pagination
Pagination utilities (action creators, higher order reducer) for Redux
https://github.com/vhpoet/redux-pagination
higher-order-component pagination reducer redux
Last synced: 12 days ago
JSON representation
Pagination utilities (action creators, higher order reducer) for Redux
- Host: GitHub
- URL: https://github.com/vhpoet/redux-pagination
- Owner: vhpoet
- License: mit
- Created: 2016-03-25T19:23:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-01T19:52:09.000Z (almost 8 years ago)
- Last Synced: 2024-10-11T09:10:58.198Z (28 days ago)
- Topics: higher-order-component, pagination, reducer, redux
- Language: JavaScript
- Size: 7.81 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Redux Pagination
=========================
Pagination utilities (action creators, higher order reducer) for [Redux](https://github.com/rackt/redux).
## Note!
The current implementation makes a lot of assumptions about your api, heavily
depends on [redux-thunk](https://github.com/gaearon/redux-thunk) and this [middleware](https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/redux/middleware/clientMiddleware.js)!
You should really look at the [code](https://github.com/vhpoet/redux-pagination/blob/master/src/index.js) before trying to use this.
## Installation
```
npm install --save redux-pagination
```
## API
```js
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`
```js
// 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:
```js
combineReducers({
history: paginate(history)
})
```
## Pagination Actions
Import the action creator init function:
```js
import { initActionCreators } from 'redux-pagination';
```
Init the Action Creators
```js
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:
```js
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`.