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
Vous devez vous connecter pour publier un commentaire.
Vous appelez ça de la
componentDidMount()
de réagir composant de votre page, ou partout où cela a du sens. Donc, dans ce fichier de composant:Donc, la clé ici est la connexion de l'installation. Le premier paramètre est la façon dont vous souhaitez transformer état (votre réducteurs) en données pour les accessoires. Ajuster le fait que vous avez besoin. La seconde est ce que les actions que vous souhaitez lier. Vous pouvez également importer envoi manuellement, mais personnellement, j'aime bien ce modèle. Il met en place des actions, comme des accessoires sur le composant, et vous pouvez l'appeler de cette façon. Il suffit de passer les arguments à ce que vous avez besoin. Cette page ici: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options explique la fonction de connexion plus en détail.
Modifier
Donné que vous êtes de la pagination sur le front-end, vous aurez besoin d'ajuster le connecter mapStateToProps fonction pour passer la pagination des données vers le composant, puis faire une boucle par elle pour afficher ce que vous avez besoin. Personnellement, je ne la pagination sur le back-end, et il suffit de faire de nouvelles demandes pour chaque page. Dépend du nombre de dossiers vous attendons à avoir.
Donc dans la se connecter à faire quelque chose comme ceci:
Ensuite dans votre composant, boucle à travers les plans à l'aide de ces indices:
En faisant certaines hypothèses de nouveau sur la façon dont vous prévoyez de le rendre, si vous avez un composant appelé Plan, etc. Mais c'est à peu près la façon dont vous pouvez travailler avec elle.
Ah désolé, oui je n'ai pas regarder de près pour voir les noms de fichier. Je savais que je manipule un peu des importations. Apporté des modifications afin de mieux expliquer comment vous pourriez éventuellement travailler avec les données.
OriginalL'auteur agmcleod
componentDidMount est un bon moment pour charger votre poing page.
BTW, À mon avis, le changement de page n'est pas l'action, c'est juste certains param pour charger vos données.
ActionCreator
Composant JSX
Composant Gestionnaires
Connecter
UNE SEULE ACTION
Peut il aide.
OriginalL'auteur nonocast