Question

我有一个React装饰器组件，它连接到Redux存储，我用它来调度一个动作（用于从API端点获取一些数据）并显示一个Loader组件。然后，一旦获取数据，它就会显示一个包装的组件。

看起来像这样：

const loadData = LoaderComponent => WrappedComponent => {
  class loadDataHOC extends Component {

    constructor(props) {
      super(props);
    }

    componentDidMount() {
      const {fetchData, isLoading} = this.props;

      if(!isLoading){
        fetchData();
      }
    }

    render() {
      const {data, isLoading} = this.props;

      if (isLoading) {
        return <LoaderComponent />;
      }

      return <WrappedComponent data={data} />;
    }
  }

  const mapStateToProps = state => {
    return {
      data: getData(state),
      isLoading: getIsLoading(state)
    };
  };

  const mapDispatchToProps = dispatch => bindActionCreators({getData}, dispatch);

  return connect(mapStateToProps, mapDispatchToProps)(loadDataHOC);
};

export default loadData;

这个组件是可重用的，所以我可以使用它来从不同的表示组件中获取和存储相同的数据。我现在要做的是在相同视图的两个不同部分使用此组件，如下所示：

const EnhancedComponent1 = loadData(Spinner)(MyPresentationalComponent1);
const EnhancedComponent2 = loadData(Spinner)(MyPresentationalComponent2)

问题是两个EnhancedComponent都会触发fetchData()，因为它们一起安装，因此isLoading道具在false中都是isLoading。

现在我已经通过检查操作中的const getData = () => (dispatch, getState) => { if(getIsLoading(getState())) { return; } dispatch(getData()); ... };道具来解决它，所以第二个调用立即停止，但我不确定这是否是处理它的最佳方法。

    angular.module('main').value('config', {
        port : '',
        ip : ''
    });

另一种方法是只创建一个父增强组件来获取数据，然后创建两个只访问状态的表示组件，但我想尽可能接近地获取数据表示部分。

由于

redux - 相同的数据获取多次调用的HOC组件

0 个答案: