Question

我是React的新手并尝试实现一个应用程序。基本上我的申请有几条路线。每路由由同一组后端数据+一些api调用支持特定于路由收回最终数据属性为api params。

所以我写了一个高阶组件来调用用于检索后端数据的API，将状态存储在redux存储中将它作为道具传递给包裹的组件，工作正常。

const withData = (WrappedComponent) => {
    class DataWrapper extends Component {
        constructor() {
            this.state = {
                c: {},
                d: []
            };
        }

    componentDidMount(){
        this.props.fetchData();
    }

    componentWillReceiveProps(nextProps){
        this.setState({
            c: nextProps.data.CSubset,
            d: nextProps.data.DSubset
        });
    }

    render() {
        return <WrappedComponent {...this.props} {...this.state}/>;
    }
    const mapStateToProps=(state)=>({
        data:state.appData
    });

    return connect(mapStateToProps,{fetchData})(DataWrapper);
}

export default withData;


class AppComponent extends Component{
    componentDidMount(){
        this.props.fetchComponentSpecificData(c.dataAttribute);
    }
    render(){
        return <div />;
    }
}

export default connect(null,{fetchComponentSpecificData}(withData(AppComponent);

但问题是为所有路由调用API。它应该是一个每个完整申请流程的时间。
特定于组件的数据获取发生在公共后端数据可用之前，导致组件特定的API调用失败。
用户可以输入网址并启动进入应用程序中的任何路径，并且必须仅调用API 一旦HOC必须系统地路由到正确的路线基于数据。请告知设计方法

Answer 1

我想说最常用的“Reacty”方法是在顶级组件的componentWillMount方法中实现全局API调用（比如AppComponent）。现在，您已将其放入将为应用程序的每个子组件安装的组件中，并且防止每次安装时都会触发API调用可能会很棘手。

使用HOC将这些数据提供给应用程序的其他组件并不是一个坏主意，但它会使您的应用程序更加隐含，而且我认为您没有获得太多收益：您正在添加一个具有隐式行为的组件，而不是仅仅在mapStateToProps中添加一行。

在全局API调用成功后，启动特定于页面的API调用非常棘手。您将需要一种方法来监视全局API调用已解决的事实，并且以React / Redux的思维方式，这意味着调度操作。要异步调度操作，您将需要一个Redux中间件，例如redux-thunk或redux-saga（我相信对于初学者来说，redux-thunk更容易）。现在，如果您有办法知道全局API调用是否成功，您可以等待调度特定操作（例如，GLOBAL_API_CALL_SUCCESS）。现在，这是我自己做一些宣传的部分：我写了redux-waitfor-middleware，允许你等待一个特定的行动被派遣。如果您使用它，它可能如下所示：

export async function fetchComponentSpecificData() { await waitForMiddleware.waitFor([GLOBAL_API_CALL_SUCCESS]); // perform actual API call for this specific component here }

我不是说waitFor中间件是实现这一目标的最佳工具，但是如果你开始的话，它可能是最容易理解的！

针对多个路径设计进行一次API调用

1 个答案: