Handle datagrid pagination with React/Redux

Question

I'm working on a React + Redux application, and I need to display a datagrid with paginated data. I have potentially thousands of rows, but I don't want virtual loading through scrollbar; I want pagination. I load data through Ajax calls.

I'm probably going to use jqGrid which seems to be a fine candidate for the job, as it can load data given on the fly, and display a "virtual" pager for data which is not yet loaded.

My question is about how I handle that in the React + Redux world.

• Should I make Ajax calls in action creators, and pass the fetched data to reducers, to put it in the state, so then components which are subscribed to the Redux store can get it?

• Or should I make the Ajax calls directly in the component?

Also where should I keep the querying data (page number, items count per page, total number of rows, sorting/grouping/filtering informations)? In the component or in the state?

Chadbourne

I authored a pagination library that manages all the state for you, provides its own datatable components, and easily lets you create your own. Lots of examples in the docs. npmjs.com/package/violet-paginator – Balefire

Here is an example of react datagrid paging - reactdatagrid.com/demo/#/Simple – Manda

Answer 1

Keeping the ajax logic in async action creators (with redux-thunk middleware) is generally a cleaner solution than messing with ajax inside components. Ideally your components should be dumb, only dealing with the props they're fed. If you're not familiar with async action creators in Redux, the docs cover it quite well: http://redux.js.org/docs/advanced/AsyncActions.html

As for storing stuff in the Redux store vs. components, the general rule of thumb is that if you want to replay a certain state, or the state says something about the application as a whole: keep it in Redux. With Redux I only use component state for trivial stuff like displaying tooltips, and other things that don't have much to do with the general data model. Of course, React and Redux don't force you to do it in one way or another, but speaking from experience, using the Redux ecosystem to handle flow of data and metadata in an application makes it much easier to reason about the code later, especially when using redux-devtools.

Lipson