美文网首页
18.实现加载更多功能19-06-26

18.实现加载更多功能19-06-26

作者: 你坤儿姐 | 来源:发表于2019-06-26 11:39 被阅读0次

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第19次提交。
1.首先到home下的reducer中的defaultState中添加articlePage数据来标记页码,
articlePage: 1,
2.到home的List列表下获取这个page数据
page: state.getIn(['home', 'articlePage'])
3.创建LoadMore'加载更多'组件,添加onClick方法,将页数page放进方法中进行处理

const mapDispatchToProps = (dispatch)=>({
  getMoreList(page){
    dispatch(actionCreators.getMoreList(page));
  }
});

4.到actionCreators中去处理加载更多功能

export const getMoreList = (page) => {
    return(dispatch) => {
      axios.get().then((res)=>
         const list = res.data.data;
         dispatch(addHomeList(list, page + 1))
    })
  }
}

在constants中添加
export const ADD_HOME_LIST_DATA = 'home/ADD_HOME_LIST_DATA';

const addHomeList = (list, nextPage) => ({
    type: constants.ADD_HOME_LIST_DATA,
    list: fromJS(list),
    nextPage
});

5.处理后的功能需求通过dispatch传给store,并交由reduser查找处理生成新的数据更新返回给store

case constants.ADD_HOME_LIST_DATA:
   return state.merge({
      'articleList': state.get('articleList').concat(action.list),
      'articlePage' : action.nextPage
});

OK到这里实现加载更多功能就实现啦。

相关文章

网友评论

      本文标题:18.实现加载更多功能19-06-26

      本文链接:https://www.haomeiwen.com/subject/qjeqcctx.html