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.