我必须显示一个包含大量数据的表.有一个分页按钮,每页显示10条记录.我有一个名为“FETCH”的按钮点击它正在填充表格.如何在页面加载时加载我的表.
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,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. I am new to react-redux. Official Documentation is good but very less explanation is given.
您可以从页面的react组件的componentDidMount()中调用它,也可以在任何有意义的位置调用它.所以在那个组件文件中：
import { requestPageOfPlans } from 'actions';
import React from 'react';
import { connect } from 'react-redux';
class MyComponent extends React.Component {
componentDidMount() {
this.props.requestPageOfPlans();
}
}
export default connect((state) => state,{ requestPageOfPlans })(MyComponent);
所以这里的关键是连接设置.第一个参数是您希望如何将状态(缩减器)转换为道具数据.根据需要进行调整.第二个是你希望绑定的行为.您也可以手动导入调度,但我个人喜欢这种模式.它将操作设置为组件上的道具,您可以这样调用它.只需根据需要将参数传递给它.此页面：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options更详细地说明了连接功能.
编辑
鉴于您在前端进行分页,您需要调整connect mapStateToProps函数以将分页数据传递给组件,然后循环遍历它以显示您需要的内容.我个人会在后端进行分页,只是对每个页面做新的请求.取决于您期望拥有多少条记录.
所以在连接中做这样的事情：
export default connect((state) => {
return {
startIndex: state.paging.lastIndex,pageSize: state.paging.pageSize,lastIndex: state.paging.lastIndex,plans: state.plans
};
},{ requestPageOfPlans })(MyComponent);
然后在您的组件中,使用这些索引遍历计划：
render() {
const plans = [];
const maxIndex = Math.min(this.props.startIndex + this.props.pageSize,this.props.lastIndex);
for (let i = this.props.startIndex || 0; i < maxIndex; i++) {
const plan = this.props.plans[i];
plans.push(<Plan key={plan.id} plan={plan} />);
}
return (
<ul>{plans}</ul>
);
}
如果你有一个名为Plan的组件,那么再次对你计划如何渲染它做一些假设.但这大致是你如何使用它.
