时间戳

首页 > 解决方案 > 在 react redux 中从 HOC 创建多个请求

javascript - 在 react redux 中从 HOC 创建多个请求

问题描述

我想从 hoc 创建多个请求，我可以为单个请求创建 hoc（调用 api 的 redux 操作），请检查单个请求的代码

我已经创建了 hoc 以减少每个组件中的重复代码，例如componentdidmount调用 api、管理错误、管理加载状态，但它仅适用于单个请求，就像您可以在给定 hoc 的初始对象中看到的那样，所以我想要创建一个可以执行多个请求（调用 api 的 redux 操作），我不知道这个适用于单个请求的解决方案是否正确实施

所以，请帮助我创建可以在任何给定场景下重新密封的 hoc

特设的

export const ComponentWithAPIRequest = ({ onMount = null, LoaderRequestID,onUnmount = null }) => (WrappedComponent) => {
return class ComponentWithAPIRequest extends Component {
    state = {
        stateLoader: true // intial Load
    };
    componentDidMount = () => {
        this.Request();
    };

    componentWillUnmount() {
        onUnmount !== null ? this.props[onUnmount]() : null;
    }

    Request = () => {
        onMount !== null ? this.props[onMount](LoaderRequestID) : null; // API request
        this.setState({ stateLoader: false });
    };

    render() {
        const { error, isLoading } = this.props; // pass it here somehow.
        const { stateLoader } = this.state;
        const isLoadingFromAPI = this.props.isLoadingRequestIds.indexOf(LoaderRequestID) !== -1 ? true : false;

        if (stateLoader) {
            return (
                <div className="text-center">
                    <CircularProgress />
                </div>
            );
        }
        if (isLoadingFromAPI) {
            return (
                <div className="text-center">
                    <CircularProgress />
                </div>
            );
        } else {
            return <WrappedComponent {...this.props} retry={this.Request} />;
        }
    }
};
};

零件

export const isContainer = ({ intial, list }) => (WrappedComponent) => {
 const IsContainer = (props) => <WrappedComponent {...props} />;
 return compose(ComponentWithAPIRequest(intial), hasRequestError) 
 (IsContainer);
};



hasRequestError // is error hoc
ComponentWithAPIRequest // is above added hoc



@isContainer({
intial: {
    onMount: 'FirstRequest', // is a redux action which call api,here i want to have multiple request like ['FirstRequest','SecondRequest'] 
    LoaderRequestID: 'FirstRequestLoader', // is an unique id for loader,which then for multiple request be converted to respective request like ['FirstRequestLoader','SecondRequestLoader'] 
    onUnmount: 'ResetLeaderBoardAll' // is a redux action when component unmount
}
 })
class ComponentView extends Component {
render() {
    return (
            <SomeComponent {...this.props}/>
    );
 }
}

 const mapStateToProps = (state) => {

   return {
    somestate:state
   };
 };



export default connect(mapStateToProps, {
 FirstRequest,
 SecondRequest
})(ComponentView);

标签： javascriptreactjsreduxreact-reduxhigher-order-components

解决方案

如果我是你，我会更新你的 hoc 并传递多个 URL 作为参数来发送多个请求，例如：

export default connect(mapStateToProps, mapDispatchToProps)(ComponentWithAPIRequest(ComponentView,
    [
       "url1", "url2" ... 
    ]));

并使用“props”或“props.requestResponses”（单个）对象将它们传递回 ComponentView。然后我会像使用它们一样

const url1response = this.props.requestResponses["url1"];

就我而言，我会将它们存储在 ComponentWithAPIRequest 的状态中，但您也可以使用 redux 并从 ComponentView 中的 mapStateToProps 获取它们。

推荐阅读