CODEWITHSUNDEEP
reactjstypescriptreduxcontainers
Tom Siwik
Tom Siwik

Reputation: 1012

Nesting connected redux containers and presentational components in typescript

I have read similar questions before but none seem to fix my issue what I'm trying to accomplish. I must be blind or misunderstanding something fundamentally.

My code example is the following:

Edit 43w8vkl554

When I'm nesting components I get the following structure: 

<Provider store={store}>
    { /* container component connected via redux (has as you can see props.children) */ }
    <Navigation>
        { /* presentational component */ }
        <Main>
            { /* container component connected via redux */ }
            <Counter />
        </Main>
    </Navigation>
</Provider>

While this seems rather intuitive I am receiving weird errors I can't explain (would be nice if someone can). In the browser the error is:

You must pass a component to the function returned by connect. Instead received undefined (Navigation.tsx) I'm not even sure if the error is related to nesting components. When i change counter to be the presentational component everything works as expected. Typescript or my implementation has issues with containers inside already connected components.

In the sandbox the error seems to come from composing counter inside main. Am I missing something? A type maybe?

I understand that I can solve this issue by nesting only inside my top-level navigation container mapping/connecting only once with the store but this is not the solution I'm looking for. I would rather want to take the advise of https://stackoverflow.com/a/38537606/222474.

Thanks in advance for the help.

Edit:

While @Tomasz has solved the error, I don't understand why this is happening. Skimming through https://www.typescriptlang.org/docs/handbook/module-resolution.html didn't help either. Is this somewhat type related for index.js exports? If someone can add clarification, this could be helpful.

Answer:

This is due to circular references where some components are imported before others, hence beeing undefined. This is quite common and it happened to me many time. The solution is just like the accepted answer: import your component directly.

Upvotes: 2

Views: 632

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

I can't explain what the actual error is, but there is some problem with the imports from components/index.tsx.

Correcting container/Counter.tsx to:

import CounterComponent from "../components/Counter";

and container/Navigation.tsx

import NavigationComponent from "../components/Navigation";

the error that connect produces will disappear.

Interestingly if you change the following in container/Counter.tsx

import * as all from '../components';
console.log(all)

Previously your code will log an empty object. Once I changed the imports to the way above - it logs the entire object with the components as entries.

Upvotes: 2

Related Questions