"Changing store on the fly" error when embedding <Provider> in a stateless component
See original GitHub issueI’m working on a large app where we’re slowly integrating Redux piecemeal, essentially converting small components into “embedded Redux apps” that are the top-level of the Redux app, but not the top-level of the React app. This has worked for the most part, but we ran into this issue:
var ReduxRoot = props => (
<Provider store={props}>
<ReactReduxConnectedComponent/>
</Provider>
)
It works fine, but any time the parent component re-renders, a <Provider> does not support changing
storeon the fly
error pops up in the console.
This is fixed by adding a shouldComponentUpdate
, and returning false
if this.props
and nextProps
are equal. But that prevents us from taking advantage of the stateless component pipeline.
I know it’s not the idealized use of Redux to embed it within a React hierarchy instead of at the top level, so I’m not sure if this issue is considered worth addressing. But maybe it is.
Issue Analytics
- State:
- Created 8 years ago
- Reactions:1
- Comments:10 (3 by maintainers)
Throwing in an answer for those who searched for the Error message in the title: Don’t call
createStore
in the provider attribute!Don’t do this:
The correct way is this:
I had the same problem as given in the title but after the advise of @totymedli, i solved my problem. I am using react-native my approach for the solution was as advised;