react+redux开发单页面应用，怎么实现列表的分页功能？

Question

更新：主要问题已解决，但是还需要保证ajax请求失败时，当前页码不发生改变的问题。现在点击前进或者后退按钮调用的逻辑是：

    this.props.actions.getServiceApplyInfo(curPage); //ajax请求数据
    this.setState({
            currentPage:curPage,

    });

因为不能保证那个ajax请求能否成功，所以当前页码数不能改变，但是上面的逻辑是不管成功不成功都发生页码改变，不合理。所以需要解决方案。。。

需要实现列表分页功能，pre,next，currentPage,totalPage这几个到底放在本组件state好呢？还是放在store树里好呢？考虑有可能ajax请求失败的情况。需要前进按钮，即prev,后退按钮,即next,还要显示当前页码和总页数，总页数需要ajax请求才能获得，通过访问全局state中的this.props.maxAge可以取到。
尝试在本组件内部比较当前页和总页数的情况，来决定前进按钮和后退按钮的隐藏或者消失，代码如下：
handleButtonState(maxPage,curPage){

    this.props.actions.getServiceApplyInfo(curPage);//ajax请求获取当前页列表信息 
    if(curPage == 1 && curPage == maxPage){
        this.setState({
            currentPage:curPage,//当前页放在本组件state中
            PrevVisibility:"hidden",//前进按钮 显示与否由本组件state决定
            NextVisibility:"hidden",//后退按钮同上
        });
    }
    else if (curPage!=1 && curPage!=maxPage){
        this.setState({
            currentPage:curPage,
            PrevVisibility:"visible",
            NextVisibility:"visible",
        });
    }
    else if (curPage!=1){
        this.setState({
            currentPage:curPage,
            PrevVisibility:"visible",
            NextVisibility:"hidden",
        });
    }
    else if (curPage!=maxPage){
        this.setState({
            currentPage:curPage,
            PrevVisibility:"hidden",
            NextVisibility:"visible",
        });
    }

}
这个是组件内定义的函数，在constructor里调用，因为ajax请求是异步的，所以组件渲染后，ajax请求才能完成，导致上面的比较不起作用。所以一开始的时候，页面中都会出现前进和后退按钮，与逻辑不符。。。
另外还要考虑ajax请求失败的话，当前页面的state变化情况。。。
求解决方案，怎么一开始就能根据当前页数和总页数的情况隐藏或者显示前进和后退按钮呢？以及，如果ajax请求失败，怎么进行相应的逻辑处理呢 ？

Answer 1

首先，分页组件需要提取出来，他并不是和每次请求的具体结果相关，他只关心当前页和总页数，这个逻辑维护在一个component里面，然后接受当前页和总页数props就可以了。
然后 this.props.actions.getServiceApplyInfo(curPage); 这个明显是个异步的过程，这个过程和之前所有的前端页面ajax取数据回来之后做操作是一样的，后面的改变state的操作得放到回调里面

两个步骤的问题都和reactjs没有什么关系，不要想太多了

一般的实现是你的渲染和state的data相关，初始给data一个空值，然后在componentDidMount里面发起ajax请求，回调里面更新state就实现了。事件监听就写在jsx里面。

Answer 2

该项目实现了你的需求，所有状态都放到 store 中管理，上一页下一页以及一页控制显示多少条数据的功能都有实现，详情请看：https://github.com/kenberkele...