1

I'm trying to understand this (radically simplified for purposes of asking this question) bit of code from Wordpress:

function MyFooContainer( {
        attr1,
        attr2,
        attr3,
        someVar
} ) {

        // do some stuff
        
        return (
                <>  
                    // some components
                </>
        );
}

const MyFooWrapper = withDispatch( (dispatch, ownProps, registry) => ( {
                // a bunch of code doing stuff, but no returns
        })
)( MyFooContainer );
 
const MyExportedFunction = (props) => {
        const { someVar } = props;
        const myTest = true;

        const Component = myTest
                ? MyFooWrapper
                : SomethingElse;

        return <Component { ...props } />
};

export default MyExportedFunction;

The way I understand things (which is probably poorly, as I'm new to both JS and React), someone calls MyExportedFunction with a bunch of parameters. One of those gets explicitly pulled out into someVar, by name. All of them get passed to Component as individual arguments (because of the ellipsis expansion). Component because of the way the test is set up, is just MyFooWrapper, which takes three arguments in order, so ... the first three props had better map to dispatch, ownProps, and registry? After that, I was really confused, but I guess base on this question that

const myFunction = withDispatch((args) => { })(MyFooContainer);

is an IIFE and MyFooContaner is passed as an argument to the withDispatch? But where did MyFooContainer get its arguments?

While we're here, why is MyFooContainer explicitly defined as a function, whereas the others are assigned as const? And last but not least, where does its return go? Who is catching that?

philolegein
  • 1,099
  • 10
  • 28
  • 1
    No, it's not an IIFE. It's a function call to the curried function `withDispatch(…)(MyFooContainer)`. Where did you import that one from? See its documentation for what it does and how it should be used. It seems to return a `MyFooWrapper` component, which - when used - will call the `MyFooContainer` with extra props. – Bergi Dec 11 '20 at 17:02
  • it's from the columns block edit.js. And, I didn't import it, I'm just trying to understand it because I'm trying to write something else and ... this seemed like a good template until I got confused :) (now going to look up "curried function") – philolegein Dec 11 '20 at 17:04
  • 1
    "*why is `MyFooContainer` explicitly defined as a function, whereas the others are assigned as `const`?*" - `MyExportedFunction` could have been a `function` declaration as well, `MyFooContainer` could've been made an arrow function expression as well. No difference. "*Where does its return go? Who is catching that?*" - same as for `MyExportedFunction`: react is rendering the jsx elements you return. – Bergi Dec 11 '20 at 17:06

0 Answers0