I am working on an existing SPA where we are binding out react components to a specific element on the page. When using react-redux we are using the Provider component to make the store available to connected components.
However, if you call ReactDOM.render multiple times, the connected components do not unsubscribe from the store and duplicate instances of the Provider are created instead of simply updating the existing components.
export const init = (Component) => {
ReactDOM.render(
<Provider store={store}>
{Component}
</Provider>,
ocument.getElementById('app')
)
}
Then calls to init happen outside of react, redux, or react-router because of the integration with an existing SPA.
init(Component1)
init(Component2)
init(Component1)
React dev tools then shows duplicate instances of the Provider as mentioned.
<Provider store={store} />
<Provider store={store} />
<Provider store={store} />
I looked into other ReactDOM methods that are available to possibly tear down any existing binding to a DOM element but this did not help, such as [unmountcomponentatnode][https://facebook.github.io/react/docs/react-dom.html#unmountcomponentatnode]