一次响应API次调用多路由设计

Question

我是 React 的新手，正在尝试实现一个应用程序。基本上我的应用程序有几条路线。每个路由由同一组后端数据+一些 api 调用支持特定于将后端数据属性作为 api 参数的路由。

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

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 被调用所有 routes.It 应该是一个每个完整应用程序流程的时间。
组件特定的数据获取发生在公共后端数据可用之前，导致组件特定的 API 调用失败。
用户可以输入 URL 并启动进入应用程序中的任何路线并且 API 必须只被调用一次，HOC 必须系统地路由到正确的路由基于数据。请指教设计方法

Answer 1

我想说最 "Reacty" 的方法是在顶级组件的 componentWillMount 方法中实现全局 API 调用（例如，AppComponent).现在，您已将它放在一个组件中，该组件将为应用程序的每个子组件安装，防止 API 调用在每次安装时被触发可能很棘手。

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

在 API 全局 API 调用成功后触发特定页面 API 调用非常棘手。您将需要一种方法来监视全局 API 调用已解决的事实，并且在 React/Redux 的思维方式中，这意味着调度一个动作。要异步分派操作，您将需要一个 Redux 中间件，例如 redux-thunk or redux-saga (I believe redux-thunk is a lot easier for beginners). Now, if you have a way to know whether or not the global API call is a success, you can wait for a specific action to be dispatched (say, GLOBAL_API_CALL_SUCCESS). Now, this is the part where I'm doing myself a bit of publicity : I've written 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次调用多路由设计

React one time API call for multiple routes design

reactjs

redux

react-router

react-redux

higher-order-components