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

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

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

  • 通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中
javascript 复制代码
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来管理异步网络请求

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

    javascript 复制代码
    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中

    javascript 复制代码
    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

    javascript 复制代码
    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);
  • 查看运行结果

相关推荐
谈不譚网安6 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板11 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩12 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真18 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅2 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss