Comment envoyer une action au chargement de la page dans réagissent-redux?

Je dois afficher un tableau avec beaucoup de données. Il y a une pagination bouton d'affichage 10 enregistrement par page. J'ai un bouton "CHERCHER" sur clic de la table de remplissage. Comment charger ma table de chargement de la page.

action.js

import fetch from 'isomorphic-fetch';
export const ADD_BENEFICIARY = 'ADD_BENEFICIARY';
export const REMOVE_BENEFICIARY = 'REMOVE_BENEFICIARY';
export const ADD_PLAN_TO_COMPARE = 'ADD_PLAN_COMPARE';
export const REMOVE_PLAN_FROM_COMPARE = 'REMOVE_PLAN_COMPARE';
export const SHOW_PLAN_COMPARE = 'SHOW_PLAN_COMPARE';
export const NEXT_PAGE_PLAN_LIST = 'NEXT_PAGE_PLAN_LIST';
export const PREV_PAGE_PLAN_LIST = 'PREV_PAGE_PLAN_LIST';
export const REQUEST_PAGE_PLAN_LIST = 'REQUEST_PAGE_PLAN_LIST';
export const RECEIVE_PAGE_PLAN_LIST = 'RECEIVE_PAGE_PLAN_LIST';
export const showNextPageOfPlans = () => {
return {
type: NEXT_PAGE_PLAN_LIST
}
}
export const showPreviousPageOfPlans = () => {
return {
type: PREV_PAGE_PLAN_LIST
}
}
export const requestPageOfPlans = (startIdx, pageSize) => {
return {
type: REQUEST_PAGE_PLAN_LIST,
start: startIdx,
pageSize: pageSize
}
}
export const receivePageOfPlans = (startIdx, json) => {
return {
type: RECEIVE_PAGE_PLAN_LIST,
start: startIdx,
plans: json
}
}
export const fetchPlans = (startIdx, pageSize) => {
var str = sessionStorage.getItem('formValue'); //JSON.stringify(formValues);
return function (dispatch) {
dispatch(requestPageOfPlans(startIdx, pageSize));
return fetch('http://172.16.32.57:9090/alternatePlans/plans/list/', {method: 'post', body: str, headers: new Headers({'Content-Type': 'application/json'})  })
.then(response => response.json())
.then(json =>
dispatch(receivePageOfPlans(startIdx, json))
)
}
}

reducer.js

import { REQUEST_PAGE_PLAN_LIST, RECEIVE_PAGE_PLAN_LIST,
NEXT_PAGE_PLAN_LIST, PREV_PAGE_PLAN_LIST } from './actions';
const initialPaging = {
startIndex: 0,
lastIndex: 0,
pageSize: 10
}
const paging = (state = initialCurrentPage, action) => {
switch (action.type) {
case NEXT_PAGE_PLAN_LIST:
if (state.startIndex+state.pageSize <= state.lastIndex) {
return { ...state, startIndex: state.startIndex+state.pageSize };
}
else {
return state;
}
case PREV_PAGE_PLAN_LIST:
if (state.startIndex-state.pageSize >= 0) {
return { ...state, startIndex: state.startIndex-state.pageSize };
}
else {
return state;
}
case REQUEST_PAGE_PLAN_LIST:
return { ...state, isFetching: true };
case RECEIVE_PAGE_PLAN_LIST:
return { ...state, isFetching: false };
default:
return state;
}
}
var initialPlans = [];
const plans = (state = initialPlans, action) => {
switch (action.type) {
case RECEIVE_PAGE_PLAN_LIST:
return action.plans.plans;
default:
return state;
}
}
const allReducers = (state = {}, action) => {
let items = plans(state.plans, action);
return {
plans: items,
paging: paging({ ...initialPaging, ...state.paging, lastIndex: items.length-1 }, action)
}
}
export default allReducers;

P. S. je suis nouveau à réagir-redux. La Documentation officielle est bon mais moins que l'explication est donnée.

OriginalL'auteur Raj Rj | 2016-08-25