@vivid-planet/redux-paging

redux-paging

redux-paging works with React Redux to render a paging in React to use Redux to store all of its state.

Installation

npm install --save @vivid-planet/redux-paging

Getting Started

Step 1 of 3: Form reducer

The store should know how to handle actions coming from the paging component. To enable this, we need to pass the pagingReducer to your store.

import { combineReducers } from 'redux';
import { reducer as pagingReducer } from '@vivid-planet/redux-paging';

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass pagingReducer under 'paging' key
  paging: pagingReducer
})

Step 2 of 3: <Paging /> Component

The <Paging /> component renders the pages calculated with the total and perPage props. The basic usage goes as follows:

<Paging
    name="pagingName"
    total={number}
    perPage={number}
    onChangePage={changePage}
/>

Step 3 of 3: Reacting to onChangePage

The new page is passed as argument to your callback function. Tell the store to change to current page after request is finished.

import { change } from '@vivid-planet/redux-paging';

export const changePage = (page) => {
    return (dispatch, getState) => {
        return sleep(1000).then(() => {
            // simulate server latency
            dispatch(change('pagingName', page));
        });
    }
}