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文件中对数据进行,修改,在页面也相应改变: