How to implement pre-loading and pagination?

[dtolstyi]

Hello,

I'm using your kit for a quite while but still I'm not sure about the idea how's it the best to implement pagination?

So, my idea is to show the list of the items to the user as soon as he opens a special page on the site.
This page should show page=1 for the first entry.
In addition, on this page, user got pagination, so he can navigate to page=2, e.g.

So far, I got react container component that uses static need = [] array to pre-load data for the first time when user accesses the page with URL: http://localhost:3000/aps e.g.
After the user presses the button of the pagination, he is redirected with <Link/> component of react-router to the URL: http://localhost:3000/aps?page=2 and redux action CHANGE_APS_PAGE is fired.

The problem is that whenever user is redirected to the page=2 the static need = [] is being re-executed again retrieving 1st page.

Looks like I'm misunderstanding something or static need is not a correct choice in this case.

I would like to hear your ideas what's the best way to implement pagination in my case?

[caranicas]

It is hard to say exactly what the problem is, without seeing your code. My best guess is that you are taking an incorrect approach to your route schema. This would probably be better answered on the react router git hub, but I can try.

it you look at the docs for react router docs you see this.

<Route path="users" component={Users}>
    <Route path="/user/:userId" component={User}/>
</Route>

If you mirrored that approach, instead of using the question mark notation, you would end up with something like this.

<Route path="aps" component={ApsPage}>
    <Route path="/aps/:pageID" component={ApsList}/>
</Route>

It might serve you better. Your backend controller should be able to parse that route and pageID, and return the correct list.

Let me know how it goes.

[jrodl3r]

try using route handlers instead? it will still fetch every time the route is entered, but you can clean that up w/ data-polling

// routes.jsx
import { fetchTeams } from 'actions/teams';

export default (store) => {
  const enterDash = () => {
    store.dispatch(fetchTeams());
  };

  return (
    <Route path="/" component={App}>
      <Route component={Dashboard} onEnter={enterDash} />
    </Route>
  );
};

[slavab89]

We're cleaning the project of stale issues therefore i'm closing this. If you still have any issue, please comment here or open a new issue.