Component in Component, React redux

Question

Is it possible to call component in component (Like inception)

Example

Content.jsx

class Content extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch(fetchNav(this.props.match.params.tab));
    }

    componentDidUpdate(prevProps) {
        if(this.props.match.params.tab != prevProps.match.params.tab) {
            this.props.dispatch(fetchNav(this.props.match.params.tab));
        }
    }

    render() {
        const {nav, match} = this.props;
        let redirect = null;
        return (
            <div>
                <ul>
                    {nav.some((item, key) => {
                        if (this.props.location.pathname != (match.url + item.path)) {
                            redirect = <Redirect to={(match.url + item.path)} />;
                        }
                        return true;
                    })}
                    {redirect}
                    {nav.map((item, key) => {
                        return <li key={key}>
                            <Link to={match.url + item.path}>{item.name}</Link>
                        </li>;
                    })}
                    <Switch>
                        {nav.map((item, key) => {
                            return <Route key={key} path={`${match.url}/list/:tab`} component={Content} />;
                        })}
                    </Switch>
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
    const {fetchNav} = state;
    const {
        lastUpdated,
        isFetching,
        nav: nav
    } = fetchNav[props.match.params.tab] || {
        isFetching: true,
        nav: []
    };

    return {
        nav,
        isFetching,
        lastUpdated
    }
};

export default connect(mapStateToProps)(withStyles(appStyle)(Content));

Actually when i do this, if my route match and call same "Content" component, it says : "this.props.dispatch is not a function"

Do you think i need to create a ContentContainer that manage connect() and pass a method via props to manage change ?

Many thanks for you answers

Regards,

Thomas.

Felix K. · Answer 1 · 2018-10-17T16:07:56.877

0

You are clearly not mapping dispatch to your props in your connect.

See the docs for redux' connect method:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

You can map the dispatch function to your props like like this:

const mapDispatchToProps = (dispatch) => ({ dispatch });
connect(mapStateToProps, mapDispatchToProps)...

Do you think i need to create a ContentContainer that manage connect() and pass a method via props to manage change ?

You don't need a container. The separation of code between a container and a (view-) component is just a pattern and not required.

As a sidenote: I would recommend to use compose to combine your HOCs, see this or this.

edited Oct 17 '18 at 16:07

answered Oct 17 '18 at 13:24

Felix K.

14,171
9
58
72

The doc say : If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props. So dispatch is by default. The dispatch works but not when the call of Content inside Content is done. So it still doesn't work. Thanks for compose ;) – Thomas Corbisier Oct 17 '18 at 15:33
@ThomasCorbisier "So dispatch is by default." – true indeed :) hmm are you sure that in your `withStyles` component you are also not stripping dispatch from your props by accident? – Felix K. Oct 17 '18 at 16:03
Try to log the props you are passing from your withStyles HOC into your content component and check if dispatch is missing. – Felix K. Oct 17 '18 at 16:09

Component in Component, React redux

1 Answers1