react 数据请求

Question

action.js

import actionTypes from "./actionTypes";
import axios from "axios";

export const getSeries = () => {
  return {
    type: actionTypes.SERIES_REQUEST,
    payload: axios.get("/api/series.json")
  };
};

import React,{useEffect} from 'react';
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { getSeries } from "../../../actions/series";
export function Header() {
    const series = useSelector(state => state, shallowEqual);
     const dispath = useDispatch();
     
     useEffect(() => {
     //第一次请求
       dispath(getSeries());
     }, []);
    return (
        <div className="header"></div>
    );
}

export function Home() {
    const series = useSelector(state => state, shallowEqual);
     const dispath = useDispatch();
     useEffect(() => {
       //第二次请求
       dispath(getSeries());
     }, []);
    return (
        <div className="home"></div>
    );
}

遇到的问题 现在会发送两次相同的请求，浪费资源。

请问如何只发送一次请求，两个组件会使用同一份数据

Answer 1

可以看下：createGlobalState
提供一个对hooks友好，有十分轻便的方案，共享全局数据
HOC更适合Class组件

Answer 2

使用 HOC

const WithData = data => {
    return WrappedComponent => {
    
        // 在这里操作...
        
        render() {
            return <WrappedComponent />
        }
    }
}

WithData(data)(Home)
WithData(data)(Header)

Answer 3

可以将Header和Home函数组件改成 class组件的写

 // app.js
 class App extends React.Components {
 
    componentDidMount() {
        // 发起请求
        this.props.getSeries()
    }
 }
 

const mapDispatchToProps = {
    getSeries:getSeries
}

const mapStateToProps = (state, ownProps) => ({
 
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

 // HeaderOrHome.js
 class HeaderOrHome extends React.Components {
 
    componentDidMount() {
     
    }
    state = {
        series:[]
    }
    static getDerivedStateFromProps(nextProps, prevState) {  
        // 请求到数据后，会改变 state.series
         return {  
            series:nextProps.series
         };  
    }
    
 }
 

const mapDispatchToProps = {
  
}

const mapStateToProps = (state, ownProps) => ({
    series:state.series
});

export default connect(mapStateToProps, mapDispatchToProps)(HeaderOrHome);

Answer 4

思路就是放在俩组件的顶层，HOC是一种方案。