【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化

React 基础巩固(三十四)——组件中的异步操作及优化

一、待优化的异步请求流程

【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化_第1张图片

  • 通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中
import React, { PureComponent } from "react";
import { connect } from "react-redux";
import {
  changeBannerAction,
  changeRecommendAction,
} from "../store/actionCreators";
import axios from "axios";

export class category extends PureComponent {
  componentDidMount() {
    axios.get("http://123.207.32.32:8000/home/multidata").then((res) => {
      console.log(res.data);
      const banners = res.data.data.banner.list;
      const recommends = res.data.data.recommend.list;
      console.log(banners, recommends);
      this.props.changeBanners(banners);
      this.props.changeRecommends(recommends);
    });
  }

  render() {
    return <div>category</div>;
  }
}

const mapDispatchToProps = (dispatch) => ({
  changeBanners(banners) {
    dispatch(changeBannerAction(banners));
  },
  changeRecommends(recommends) {
    dispatch(changeRecommendAction(recommends));
  },
});

export default connect(null, mapDispatchToProps)(category);

二、利用Redux优化异步网络请求

  • 通过redux来管理异步网络请求
    【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化_第2张图片

  • 在store中引入中间件redux-thunk

    import { createStore, applyMiddleware } from "redux";
    import reducer from "./reducer";
    import thunk from "redux-thunk";
    
    // 正常情况下,store.dispatch 只能派发对象
    // 想要派发函数,需要增强,使用 “redux-thunk”
    
    const store = createStore(reducer, applyMiddleware(thunk));
    
    export default store;
    
    
  • 构建fetchHomeMultidataAction,将原本在组件中的异步请求代码放入到actionCreators.js中

    import * as actionTypes from "./constants";
    import axios from "axios";
    
    export const addNumberAction = (num) => ({
      type: actionTypes.ADD_NUMBER,
      num,
    });
    
    export const subNumberAction = (num) => ({
      type: actionTypes.SUB_NUMBER,
      num,
    });
    
    export const changeBannerAction = (banners) => ({
      type: actionTypes.CHANGE_BANNERS,
      banners,
    });
    
    export const changeRecommendAction = (recommends) => ({
      type: actionTypes.CHANGE_RECOMMENDS,
      recommends,
    });
    
    export const fetchHomeMultidataAction = () => {
      return (dispatch, getState) => {
        // 异步操作
        axios.get("http://123.207.32.32:8000/home/multidata").then((res) => {
          const banners = res.data.data.banner.list;
          const recommends = res.data.data.recommend.list;
          dispatch(changeBannerAction(banners))
          dispatch(changeRecommendAction(recommends))
        });
      }
    };
    
    
  • 改写原来的category.jsx,派发异步请求的dispatch

    import React, { PureComponent } from "react";
    import { connect } from "react-redux";
    import { fetchHomeMultidataAction } from "../store/actionCreators";
    // import axios from "axios";
    
    export class category extends PureComponent {
      componentDidMount() {
        // axios.get("http://123.207.32.32:8000/home/multidata").then((res) => {
        //   console.log(res.data);
        //   const banners = res.data.data.banner.list;
        //   const recommends = res.data.data.recommend.list;
        //   console.log(banners, recommends);
        //   this.props.changeBanners(banners);
        //   this.props.changeRecommends(recommends);
        // });
    
        this.props.fetchHomeMultidata();
      }
    
      render() {
        const { banners, recommends } = this.props;
        return (
          <div>
            category
            <div className="banner">
              <h2>轮播图:</h2>
              <ul>
                {banners.map((item, index) => {
                  return <li key={index}>{item.title}</li>;
                })}
              </ul>
            </div>
            <div className="recommend">
              <h2>推荐数据:</h2>
              <ul>
                {recommends.map((item, index) => {
                  return <li key={index}>{item.title}</li>;
                })}
              </ul>
            </div>
          </div>
        );
      }
    }
    
    const mapStateToProps = (state) => ({
      counter: state.counter,
      banners: state.banners,
      recommends: state.recommends,
    });
    
    const mapDispatchToProps = (dispatch) => ({
      //   changeBanners(banners) {
      //     dispatch(changeBannerAction(banners));
      //   },
      //   changeRecommends(recommends) {
      //     dispatch(changeRecommendAction(recommends));
      //   },
      fetchHomeMultidata(recommends) {
        dispatch(fetchHomeMultidataAction(recommends));
      },
    });
    
    export default connect(mapStateToProps, mapDispatchToProps)(category);
    
    
    
  • 查看运行结果

【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化_第3张图片

你可能感兴趣的:(前端知识,React,前端,react.js,前端框架)