Initial Setup

In violet-paginator, each paginated list gets its own reducer, which is generated by calling the createReducer function. This function accepts a config object with only two required properties: listId and fetch. The listId is used to identify your reducer and must be unique. The fetch property is an action creator that's used to retrieve the results (check here for more). Example:

import { createPaginator } from 'violet-paginator'
import { combineReducers } from 'redux'
import users from './users/reducer'
import { fetch } from './recipes/actions'

export default combineReducers({
  users,
  recipes: createPaginator({
    listId: 'recipes', // expects reducer to be mounted at state.recipes
    fetch
  })
})

By default, violet-paginator will use the listId to figure out where to find your reducer. In the example above, it will expect the reducer to be mounted at state.recipes. To override this behavior, specify a locator function like this:

export default combineReducers({
  users,
  recipes: createPaginator({
    listId: 'recipesList',
    locator: state => state.recipes, // locator function accepts the state and returns the correct reducer
    fetch
  })
})

Additionally, you can use this opportunity to override the initial settings or configure the page params for your list:

export default combineReducers({
  users,
  recipes: createPaginator({
    listId: 'recipes',
    fetch,
    initialSettings: {
      pageSize: 25,
      sort: 'name',
      filters: {
        active: true
      }
    },
    pageParams: {
      resultsProp: 'recipes',
      totalCountProp: 'total'
    }
  })
})