0

I am trying to implement pagination with backward and forward functionality, but the problem is how to keep state between transitions and restore on navigation?

I was trying to achieve that with react-router in following way:

Search Result Component

handleNextPage(){
        this.props.push({
            pathname: '/search_result',
            query:{
                key:key,
                location:location,
                page: eventKey
            },
            state:{
                content:this.props.searchResult.content,
                number: eventKey
            }
        });
    }

Then in reducer:

import {LOCATION_CHANGE} from 'react-router-redux';
export default function (state = INIT_STATE, action) {
switch (action.type) {
    case LOCATION_CHANGE:
        let {pathname} = action.payload;
        if (pathname === PATHNAME && (action.payload.state !== null)) { 
                return {...state, content: action.payload.state.content, number: action.payload.state.number}
        }
}

return state;

}

The problem is that when SearchResult component is initiated, data from server is not yet available hence empty array is stored as state for current location.

Thank You in advance for any ideas how to solve it.

jmac
  • 648
  • 3
  • 15

1 Answers1

1

I suggest you to go through the examples in the redux git repository.By the time you reach the last 'real world' example that contains pagination, you'll be able to answer this question yourself.

Igorsvee
  • 3,335
  • 1
  • 22
  • 20