20.异步代码拆分优化

1.我们将原来的componentDidMount修改,把changeHomeData定义在mapDispatch中
在这里插入图片描述2.我们在home目录下的store新建三个文件
在这里插入图片描述
actionCreators:

import axios from 'axios';
import * as actionTypes from './actionTypes';
export const getHomeInfo = () => {
    return (dispatch) => {
        axios.get('/api/home.json').then((res) => {
            const result = res.data.data;
            const action = {
                type: actionTypes.CHANGE_HOME_DATA,
                articleList: result.articleList,
                recommedList: result.recommedList
            }
            dispatch(action);
        })
    }
}

actionTypes.js

export const CHANGE_HOME_DATA = 'home/CHANGE_HOME_DATA';

index.js:

import * as actionCreators from './actionCreators';
import * as actionTypes from './actionTypes';
export { actionCreators,actionTypes };

4.我们在reducer中引入actionTypes,并更改变量
在这里插入图片描述然后就可以了

猜你喜欢

转载自blog.csdn.net/zhuhui2000/article/details/91358640