Can't connect redux store to sematic ui dimmer components

Question

I am using React with semantic-ui-react library. The problem is when i use semantic-ui Dimmer and try to connect a component inside it to redux i get the error: Uncaught Invariant Violation: Could not find "store" in the context of "Connect(myComp)". I managed to get over this error by wrapping the inner component in Provider like this:

import { Dimmer } from 'semantic-ui-react'
import { Provider } from 'react-redux'
import store from '../storelocation/store'
import SubComp from './subComp'

class App extends React.Component{
    render(){
        return(
            <div>
                <Dimmer>
                    <Provider store={store}>
                        <SubComp/>
                    </Provider>
                </Dimmer>
            </div>
        )
    }
}

Doing this, my SubComp is now able to connect(mstp,mdtp).

Such problem is not showing up in any other part of the app. I have wrapped my root component in Provider in my index.js like this:

ReactDom.render(
    <Provider store={store}>
        <App/>
    </Provider>, document.getElementById('root')
);

Now since wrapping my SubComp in provider each time i use it, fades the smile from my face, i am looking for a better option and maybe a correction if i am doing something terribly wrong here. tnx.

Answer 1

The problem here occurs because Semantic-UI-React uses React Portals for components like Modal, Confirm, Dimmer, Popup etc.

For more information about Portals and why this problem occurs, you may refer to this comment.

Unfortunately there seems to be no better way than wrapping your own components under Portal with a Provider via extracting store (as you have done) as of now.