lets-paginate
~ Z dedykacją dla K.
What does it do? It provides a set of tools so that you wouldn't bother about paginating and caching your data in a react/redux application.
How does it work? It just stores your cached data in a redux store in chunks, so it can be easily accessed.
How can I make it work? The package consists of a reducer, a middleware and a component wrapper. You need to import all of them to make it work.
First step: Import a reducer from 'lets-paginate'
and add it to your main reducer:
// reducers.js// ...const reducers = // ... pagination: reducer// ...reducers
Second step: Import a middleware and add it to applyMiddleware
function provided by redux
// ...const store =
Third step: Import reduxPagination
wrapper and attach it to your component. There are two configuration options you have to provide: names
is an array of unique names for your data, fetch
is a array of functions where you fetch new data from an external source. The rest of the parameters are optional, array allDataExpected
with a value of [true]
indicated that a list users
is going to be fetched only once. Optional function mapStateAndDispatchToProps
is a combination of functions mapStateToProps
and mapDispatchToProps
provided to connect
from react-redux
and works the same way except it takes state
, dispatch
and ownProps
arguments at once.
// ... names: 'users' fetch: getUsers allDataExpected: true // default - false mapStateAndDispatchToPropsUsers
Fourth step: Implement function fetch
. Example below:
const getUsers page entries saveData options => APIusers
How you fetch data is up to you as soon as you execute saveData
function with a fetched data. You might use redux-thunk as in the example above however lets-paginate is compatible with redux-saga as well.
API reference:
When you wrap your React component with reduxPagination
(like the example above) and you name your list users
, you will get a few new props:
dataUsers
is a prop that contains a piece of your cached data basing on values ofpage
andentries
. It takes a value of undefined when new data is being fetched.pageUsers
is a number of current pageentriesUsers
is a number of items on a current pageonPageChangeUsers({ page, entries } [, options])
is a function that sets new values ofpage
andentries
and updatesdata
. When your cached data lacks data basing on a new values ofpage
andentries
it automatically dispatches functionfetch
(provided inreduxPagination
). Optional argumentoptions
will be passed to thefetch
function as the last argument.onAddItemUsers(item [, index])
is a fuction that adds a new element to your cached data atindex
. Default value ofindex
is 0.onAddItem
with a value of index equal to -1 adds the item after the last element of cached data.onRemoveItemUsers(index)
is a function that removes element atindex
resetUsers()
is a function that deletes all cached data
Notice that props are generated using the name of your list is a camelCase practice.
You can provide as many names
as you want. The only requirement is that the length of an each array (names
, fetch
and allDataExpected
) has to be equal. The order in the arrays matters just the same.
names: 'streets' 'cities' 'countires' fetch: getStreets getCities getCountries allDataExpected: false true true mapStateAndDispatchToPropsUsers
Using the example above you will get many generated props: dataStreets
, dataCities
, dataCountires
, pageStreets
, pageCities
, pageCountries
, entriesStreets
etc.
Using the same name for your list in different components gives you an access to the same list stored in a redux store. It is a way to share data between components.
Selector
You can manually access the data from the store by using a selector:
// ...const usersSelector = const mapStateToProps = { const page entries = state return data: } mapStateToPropsUsers
selector(name)(state, { page, entries })
returns a selected piece of the data, if any of the data is missing the function returns undefined.selector(name)(state)
returns all the stored data
License
MIT