17. 项目实战：首页开发（三）

首页异步数据获取

异步操作代码拆分优化

这一小节，我们要实现的是，将之前的数据放入模拟接口中，然后通过redux获取接口数据。
1.先写模拟接口api/home.json

//===>public/api/home.json
{
    "success": true,
    "data": {
        "topicList": [
            {
                "id": 1,
                "title": "社会热点",
                "imgUrl": "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
            },
            {
                "id": 2,
                "title": "手绘",
                "imgUrl": "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
            }
        ],
        "articleList": [
            {
                "id": 1,
                "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": 2,
                "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": 3,
                "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": 4,
                "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"
            }
        ],
        "recommendList": [
            {
                "id": 1,
                "imgUrl": "http: //cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png"
            },
            {
                "id": 2,
                "imgUrl": "http: //cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"
            },
            {
                "id": 3,
                "imgUrl": "http: //cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png"
            },
            {
                "id": 4,
                "imgUrl": "http: //cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png"
            }
        ]
    }
}

2.模拟接口有了，接下来我们要获取接口数据，并在reducer中处理它。
先写一个获取到数据的action常量

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

导出这个constants文件

//===>src/pages/home/store/index.js
import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'

export { reducer, actionCreators, constants }

编写用来异步请求和创建action的actionCreators

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

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

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

actionCreators设计好了，我们在组件中创建并分发这个action的时候，就会进行异步请求了，请求的结果还要经过reducer处理下

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

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

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)
            })
        default:
            return state;
    }
}

3.数据处理相关完成了，最后我们来修改Home组件，实现接口获取数据

//===>src/pages/home/index.js
import React, { Component } from 'react'
import { HomeWrapper, HomeLeft, HomeRight } from './style'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import { connect } from 'react-redux'
import { actionCreators } from './store'
class Home extends Component {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className="banner-img" src="https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt='' />
                    <Topic />
                    <List />
                </HomeLeft>
                <HomeRight>
                    <Recommend />
                    <Writer />
                </HomeRight>
            </HomeWrapper>
        )
    }

    componentDidMount() {
        this.props.changeHomeData()
    }
}
const mapDispatch = (dispatch) => ({
    changeHomeData() {
        const action = actionCreators.getHomeInfo()
        dispatch(action)
    }
})

export default connect(null, mapDispatch)(Home)

效果不变