Hey Tyler,
I did figure out a solution, though I am not super confident this approach is considered best practice. I simply export the store after it's created in index.js, and import it from index.js into my popup component and pass it to the popup tree's <Provider>.
So index.js looks like this:
...
export const store = configureStore()
const render = () => ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<App history={ history } />
</Provider>
</AppContainer>,
document.getElementById('root')
)
render()
...
and my popup component looks like this:
import React from 'react'
import ReactDOM from 'react-dom'
import StreamPopup from '../../containers/StreamPopup'
import { Provider } from 'react-redux'
import { store } from '../../index'
const buildPopup = () => {
let popupNode = document.createElement('div')
ReactDOM.render(
<Provider store={ store }>
<StreamPopup />
</Provider>,
popupNode
)
return popupNode
}
export default buildPopup
I had trouble finding any recommendations online about the best way to do this, which was a little surprising given the fact that multiple React trees in the same app are quite common and Redux is so widely used. One thing I would be a little wary of with this approach are race-conditions (if two React trees are 'racing' to change the same state props at the same time).
Maybe you'll have better luck than me finding a definitive solution? If you do, let me know!