2-6 中我们实现了ajax 发送请求,并将数据放到了redux 中。
现在,我们来进行一个代码优化,将异步请求放在 action 中管理。
可以先将 src/pages/home 下的 index.js 中 componentDidMount 生命周期函数中的代码,挪到 changeHomeData 方法中,如下。
import React, {Component} from 'react';
import { connect } from 'react-redux';
import {HomeWrapper, HomeLeft, HomeRight } from './style';
import List from './components/List';
import Recommend from './components/Recommend';
import Topic from './components/Topic';
import Writer from './components/Writer';
import bannerImage from '../../statics/ooo.jpg';
import axios from 'axios';
class Home extends Component {
render () {
return (
<HomeWrapper>
<HomeLeft>
<img
className="banner-img"
src={bannerImage}
alt=''
/>
<Topic></Topic>
<List></List>
</HomeLeft>
<HomeRight>
<Recommend></Recommend>
<Writer></Writer>
</HomeRight>
</HomeWrapper>
)
}
componentDidMount () {
this.props.changeHomeData();
}
}
const mapDispatch = (dispatch) => {
return {
changeHomeData () {
axios.get("/api/home.json").then((res) => {
const result = res.data.data;
const action = {
type: "change_home_data",
topicList: result.topicList,
articleList: result.articleList,
recommendList: result.recommendList
};
dispatch(action);
})
}
}
}
export default connect(null, mapDispatch)(Home);
这个项目中,我们使用了redux-thunk 。因此接下来,我们把这个异步请求,放到action 中管理。
我们在 src/pages/home/store 下创建文件actionCreators.js 。
然后,先在 src/pages/home/store 下的 index.js 引入和导出 actionCreators,如下。
import reducer from './reducer';
import * as actionCreatores from './actionCreators';
export {reducer, actionCreatores};
然后,我们去 actionCreators.js 中定义异步操作,如下。
import axios from 'axios';
export const getHomeInfo = () => {
return (dispatch) => {
axios.get("/api/home.json").then((res) => {
const result = res.data.data;
const action = {
type: "change_home_data",
topicList: result.topicList,
articleList: result.articleList,
recommendList: result.recommendList
};
dispatch(action);
});
}
}
然后,我们去src/pages/home 下的index 组件中创建action ,如下。
import React, {Component} from 'react';
import { connect } from 'react-redux';
import {HomeWrapper, HomeLeft, HomeRight } from './style';
import List from './components/List';
import Recommend from './components/Recommend';
import Topic from './components/Topic';
import Writer from './components/Writer';
import bannerImage from '../../statics/ooo.jpg';
import { actionCreatores } from './store';
class Home extends Component {
render () {
return (
<HomeWrapper>
<HomeLeft>
<img
className="banner-img"
src={bannerImage}
alt=''
/>
<Topic></Topic>
<List></List>
</HomeLeft>
<HomeRight>
<Recommend></Recommend>
<Writer></Writer>
</HomeRight>
</HomeWrapper>
)
}
componentDidMount () {
this.props.changeHomeData();
}
}
const mapDispatch = (dispatch) => {
return {
changeHomeData () {
const action = actionCreatores.getHomeInfo();
dispatch(action);
}
}
}
export default connect(null, mapDispatch)(Home);
接着,我们再来修改一下 src/pages/home/store 下的 actionCreators.js
import axios from 'axios';
const changeHomeData = (result) => ({
type: "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);
});
}
}
好啦,然后呢,我们把action 的type 变为常量,这样更利于排错。我们在 src/pages/home/store 下新建一个文件 actionTypes.js。
然后我们现在同级目录下 index 中添加它
import reducer from './reducer';
import * as actionCreatores from './actionCreators';
import * as actionTypes from './actionTypes';
export {reducer, actionCreatores, actionTypes};
然后,在去actionTypes.js 中添加type,如下。
export const CHANGE_HOME_DATA = 'home/change_home_data';
然后我们改一下actionCreators.js 如下。
import axios from 'axios';
import * as actionTypes from './actionTypes';
const changeHomeData = (result) => ({
type: actionTypes.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);
});
}
}
同样也该一下reducer.js 。