2-7 异步操作代码优化

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 。