Using Redux's connect for various components

Question

I have three components which are embedded in each other, and they all to be hooked up to the reducers with the same actions. It seems I have only found examples where in a certain container files where only one of the components is passed through the connect function.

How can I do this?

Here is my current code, although not sure if necessary:

    //need HelpMenu2 and HelpMenu3 to be passed through as well.
    export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu1);

Edit: As requested, here is the code:

class HelpMenu extends Component{
    render(){
        var me=this;
        var api ="https://api.someapi.com/";
        return(
            <ul>
                <div >Click here to test</div><br/>
                {this.state.allTopics.map(function (helpTopics, key) {
                    return (
                        <ul key={key}>
                            <li>

                                <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                    {helpTopics.id}
                                    </div>
                                <ul>
                                    {helpTopics.isExpanded ? <SubMenu2 helpTopics={helpTopics}  isLastExpanded={false}/> : null}
                                </ul>
                            </li>
                        </ul>
                    );
                })}
            </ul>
        );
    }
}

class SubMenu extends Component{

    render(){
        var me =this;
        var api ="https://api.someapi.com/";
        return (
            <div>
                {this.props.helpTopics.subtopics.map(function (helpSubtopics, key) {
                    return (
                        <ul key={key}>
                            <li>
                                <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                    {helpSubtopics.id}</div>
                                {helpSubtopics.isExpanded ? <LastSubMenu helpSubtopics={ helpSubtopics}/> : null}
                            </li>

                        </ul>
                    );
                })}
            </div>
        );
    }
}


class LastSubMenu extends Component{

    render(){
        var me=this;
        var api ="https://api.someapi.com/";
        return(
            <div>
                {this.props.helpSubtopics.subtopics
                    .map(function (helpSubSubtopics, key) {
                        return (
                            <ul key={key}>
                                <li>
                                    <div
                                        onClick={me.onTopicClick.bind(me, helpSubSubtopics)}>
                                            <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                        {helpSubSubtopics.title}
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        );
                    })}
            </div>

        );
    }
}

The events would happen where there is the onClick on the tag.

Edit: my connect code:

export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu);

How would I make multiple calls for it? From my understanding, you can only use export default once per file, so I did this:

export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu);
connect( mapStateToProps, matchDispatchToProps)(SubMenu2);
connect( mapStateToProps, matchDispatchToProps)(LastSubMenu);

Which doesn't work.

Answer 1

Call connect again with the other components.

You need to export the returned value from each method call separately. in ES6 that can look like this. (you might need to search for what syntax works with your js setup) export const first = connect( mapStateToProps, matchDispatchToProps)(HelpMenu); export const second = connect( mapStateToProps, matchDispatchToProps)(SubMenu2); export const third = connect( mapStateToProps, matchDispatchToProps)(LastSubMenu);

Then access them separately in the component that displays them.