代码见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到这里实现加载更多功能就实现啦。
网友评论