18. 项目实战：首页开发（四）

实现加载更多功能

这里我们想做一个加载更多按钮的功能，点击按钮，page加1，然后调接口显示数据。
1.写一个加载更多的模拟接口

//===>public/api/homeList.json
{
    "success": true,
    "data": [
        {
            "id": 5,
            "title": "Android Studio 4.0 稳定版发布啦！你更新了吗",
            "desc": "Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...",
            "imgUrl": "https: https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
        },
        {
            "id": 6,
            "title": "Android Studio 4.0 稳定版发布啦！你更新了吗",
            "desc": "Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...",
            "imgUrl": "https: https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
        },
        {
            "id": 7,
            "title": "Android Studio 4.0 稳定版发布啦！你更新了吗",
            "desc": "Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...",
            "imgUrl": "https: https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
        },
        {
            "id": 8,
            "title": "Android Studio 4.0 稳定版发布啦！你更新了吗",
            "desc": "Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...",
            "imgUrl": "https: https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
        }
    ]
}

2.增加分页接口的action常量

//===>src/pages/home/store/constants.js
export const CHANGE_HOME_DATA = 'home/CHANGE_HOME_DATA'
export const ADD_ARTICLE_LIST = 'home/ADD_ARTICLE_LIST'

3.编写actionCreators的代码

//===>src/pages/home/store/actionCreators.js
import axios from 'axios'
import * as constants from './constants'
import { fromJS } from 'immutable'

const changeHomeData = (result) => ({
    type: constants.CHANGE_HOME_DATA,
    topicList: result.topicList,
    articleList: result.articleList,
    recommendList: result.recommendList
})

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

export const getHomeInfo = () => {
    return (dispatch) => {
        axios.get('/api/home.json').then((res) => {
            const result = res.data.data
            const action = changeHomeData(result)
            dispatch(action)
        })
    }
}

export const getMoreList = (page) => {
    return (dispatch) => {
        axios.get('/api/homeList.json?page=' + page).then((res) => {
            const result = res.data.data
            const action = addHomeList(result, page + 1)
            dispatch(action)
        })
    }
}

4.action发到了reducer中，那么接下来编写reducer

//===>src/pages/home/store/reducer.js
import { fromJS } from 'immutable';
import * as constants from './constants'

const defaultState = fromJS({
    topicList: [],
    articleList: [],
    recommendList: [],
    articlePage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case constants.CHANGE_HOME_DATA:
            return state.merge({
                topicList: fromJS(action.topicList),
                articleList: fromJS(action.articleList),
                recommendList: fromJS(action.recommendList)
            })
        case constants.ADD_ARTICLE_LIST:
            return state.merge({
                'articleList': state.get('articleList').concat(action.list),
                'articlePage': action.nextPage
            })
        default:
            return state;
    }
}

5.我们把加载更多功能的按钮，添加到List组件的下面

//===>src/pages/home/components/List.js
import React, { Component } from 'react'
import { ListItem, ListInfo, LoadMore } from '../style'
import { connect } from 'react-redux'
import { actionCreators } from '../store'

class List extends Component {
    render() {
        const { list, page, getMoreList } = this.props
        return (
            <div>
                {
                    list.map((item, index) => {
                        return (
                            <ListItem key={index}>
                                <img className='pic' src={item.get('imgUrl')} alt='' />
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        )
                    })
                }
                <LoadMore onClick={() => getMoreList(page)}>更多文字</LoadMore>
            </div>
        )
    }
}

const mapState = (state) => ({
    // list: state.get('home').get('articleList')
    list: state.getIn(['home', 'articleList']),
    page: state.getIn(['home', 'articlePage'])
})

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

export default connect(mapState, mapDispatch)(List)

6.LoadMore的样式文件

//===>src/pages/home/style.js
...
export const LoadMore = styled.div`
width:100%;
height:40px;
line-height:40px;
margin:30px 0;
background:#a5a5a5;
text-align:center;
border-radius:20px;
color:#fff;
cursor:pointer;
`

我们的效果实现了