1.我們?cè)趐ublic文件夾下的api文件夾下新建一個(gè)json文件，home.json

2.在這里面我們將home頁面中的數(shù)據(jù)存放進(jìn)來，home.json中的代碼

{"success":true,"data":{"articleList": [{"id": 1,"title": "男人離不開的，往往是“不好惹”的女人","desc": "幸福，大概就是，你想要靠近的那個(gè)人，永遠(yuǎn)都不會(huì)推開你。不管他忙與不忙，只要你一回頭，就能看見他的樣子。 受委屈的時(shí)候，他會(huì)各種討好你，遇到麻煩事... "},{"id": 2,"title": "男人離不開的，往往是“不好惹”的女人","desc": "幸福，大概就是，你想要靠近的那個(gè)人，永遠(yuǎn)都不會(huì)推開你。不管他忙與不忙，只要你一回頭，就能看見他的樣子。 受委屈的時(shí)候，他會(huì)各種討好你，遇到麻煩事... "} ],"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中，將數(shù)據(jù)清除，保留空數(shù)組
4.我們?cè)趆ome目錄下的index中，去獲取ajax
5.我們打印一下res的data下的data
6.在home的index下，引入axios，來實(shí)現(xiàn)異步請(qǐng)求
7.通過 componentDidMount接收ajax異步數(shù)據(jù)

//通過 componentDidMount接收ajax異步數(shù)據(jù)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}//在這里調(diào)用 changeHomeData方法，并且將action傳遞進(jìn)來this.props.changeHomeData(action);})} } const mapDispatch = (dispatch) => ({//定義一個(gè)方法 changeHomeData來派發(fā)action，將上面?zhèn)鬟f進(jìn)來的action派發(fā)給storechangeHomeData(action) {dispatch(action);} }) export default connect(null, mapDispatch)(Home);

8.這里派發(fā)的action，在store中可以接收到，在home目錄下的reducer中

import { fromJS } from 'immutable'; const defaultState = fromJS({articleList: [],recommedList: [] }) export default (state = defaultState, action) => { //判斷action的類型，然后執(zhí)行相應(yīng)的操作switch (action.type) {case 'change_home_data':return state.merge({articleList: fromJS(action.articleList),recommedList: fromJS(action.recommedList),})default:return state;}}

結(jié)果：
9.當(dāng)我們?cè)趈son文件中對(duì)數(shù)據(jù)進(jìn)行，修改，在頁面也相應(yīng)改變：

總結(jié)

以上是生活随笔為你收集整理的19.首页异步数据的获取的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。