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

  • 因此，我编写了一个高阶组件来调用 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 调用失败。
  • 用户可以输入 URL 并启动应用程序内的任何路由，API 只需调用一次，HOC 必须根据数据系统地路由到正确的路由。请告知设计方法
4

1 回答 1

1

我会说最“反应”的方式是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 中间件是实现这一目标的最佳工具，但如果您刚开始，它可能是最容易理解的！

于 2017-10-02T04:19:52.503 回答