19.首页异步数据的获取

1.我们在public文件夹下的api文件夹下新建一个json文件，home.json

2.在这里面我们将home页面中的数据存放进来，home.json中的代码

{
    "success":true,
    "data":{
        "articleList": [{
           "id": 1,
           "title": "男人离不开的，往往是“不好惹”的女人",
            "desc": "幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... "},
        {
            "id": 2,
            "title": "男人离不开的，往往是“不好惹”的女人",
            "desc": "幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... "} 
        ],
        "recommedList": [
            {
                "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"  
                  }
        ]
    }
}

3.在reducer中，将数据清除，保留空数组
4.我们在home目录下的index中，去获取ajax
5.我们打印一下res的data下的data
6.在home的index下，引入axios，来实现异步请求
7.通过 componentDidMount接收ajax异步数据

 //通过 componentDidMount接收ajax异步数据
    componentDidMount(){
            axios.get('/api/home.json').then((res) => {
                const result = res.data.data;
                const action = {
                    type: 'change_home_data',
                    articleList: result.articleList,
                    recommedList:result.recommedList
                }
                
                //在这里调用 changeHomeData方法，并且将action传递进来
                this.props.changeHomeData(action);
            })
        }
}
const mapDispatch = (dispatch) => ({
    //定义一个方法 changeHomeData来派发action，将上面传递进来的action派发给store
    changeHomeData(action) {
        dispatch(action);
    }
})
export default connect(null, mapDispatch)(Home);

8.这里派发的action，在store中可以接收到，在home目录下的reducer中

import { fromJS } from 'immutable';
const defaultState = fromJS({
    articleList: [],
    recommedList: []
})
export default (state = defaultState, action) => {
//判断action的类型，然后执行相应的操作
    switch (action.type) {
        case 'change_home_data':
            return state.merge({
                articleList: fromJS(action.articleList),
                recommedList: fromJS(action.recommedList),
            })
          
        default:
        return state;
    }
    
}

结果：
9.当我们在json文件中对数据进行，修改，在页面也相应改变：