React-dnd problem

what does this export mean

export default DragDropContext(HTML5Backend)(
    //connectAPP
    connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App)
);

import * as React from "react";
import { Route } from "react-router-dom";
import { connect } from "react-redux";
import { IRootState } from "modules";
import { IntlProvider } from "react-intl";
import { checkOnline, setLoading } from "modules/engine/actions";
import platform from "lib/platform";
import * as classnames from "classnames";

import { AnimatedSwitch } from "components/Animation";
import Splash from "components/Splash";
import Main from "containers/Main";
import Auth from "containers/Auth";

import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";
import InitHook from "containers/App/InitHook";
import { switchWindow } from "modules/gui/actions";
import ModalProvider from "containers/Modal/ModalProvider";

interface IAppProps {
    locale: string;
    isAuthenticated: boolean;
    isCollapsed: boolean;
    isLoading: boolean;
    isConnected: boolean;
    isConnecting: boolean;
    localeMessages: { [key: string]: string };
    setLoading?: typeof setLoading;
    checkOnline?: typeof checkOnline.started;
    switchWindow?: typeof switchWindow.started;
}

class App extends React.Component<IAppProps> {
    componentDidMount() {
        if (!this.props.isConnecting && this.props.isLoading) {
            this.props.checkOnline(null);
        }
    }

    componentWillReceiveProps(props: IAppProps) {
        if (this.props.isAuthenticated !== props.isAuthenticated) {
            props.switchWindow(props.isAuthenticated ? "main" : "general");
        }

        if (null === this.props.isConnected && null !== props.isConnected) {
            if (props.isConnected) {
                props.setLoading(false);
            }
            else {
                this.props.setLoading(false);
            }
        }

        if (this.props.isAuthenticated !== props.isAuthenticated) {
            this.props.setLoading(false);
        }
    }

    render() {
        const classes = classnames({
            "wrapper": true,
            "layout-fixed": true,
            "aside-collapsed": this.props.isCollapsed,
            "aside-toggled": !this.props.isCollapsed,
            "platform-desktop": platform.select({ desktop: true }),
            "platform-web": platform.select({ web: true }),
        });

        return (
            <IntlProvider locale={this.props.locale} defaultLocale="en-US" messages={this.props.localeMessages}>
                <div className={classes}>
                    <InitHook />
                    <ModalProvider />
                    <AnimatedSwitch animation={AnimatedSwitch.animations.fade()}>
                        {this.props.isLoading && (
                            <Route path="/" component={Splash} />
                        )}
                        {!this.props.isAuthenticated && (
                            <Route path="/" component={Auth} />
                        )}
                        <Route path="/" component={Main} />
                    </AnimatedSwitch>
                </div>
            </IntlProvider>
        );
    }
}

const mapStateToProps = (state: IRootState) => ({
    locale: state.storage.locale,
    localeMessages: state.engine.localeMessages,
    isAuthenticated: state.auth.isAuthenticated,
    isCollapsed: state.engine.isCollapsed,
    isLoading: state.engine.isLoading,
    isConnected: state.engine.isConnected,
    isConnecting: state.engine.isConnecting
});

const mapDispatchToProps = {
    setLoading,
    checkOnline: checkOnline.started,
    switchWindow: switchWindow.started
};

// export default connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App);
//
export default DragDropContext(HTML5Backend)(
    //connectAPP
    connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(App)
);
Mar.02,2021
The

connect function is a higher-order function that takes some parameters and returns a function, and App is used here as an argument to this returned function. Specifically, you can read my article, which should be helpful. https://codeshelper.com/a/11.

Menu