-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Changing store on the fly" error when embedding <Provider> in a stateless component #259
Comments
It's totally fine, we should support this.
Please see the relevant check. It's comparing identities. This means that the This is also a bit weird: var ReduxRoot = props => (
<Provider store={props}>
<ReactReduxConnectedComponent/>
</Provider>
) Shouldn't that be more like var ReduxRoot = props => (
<Provider store={props.store}>
<ReactReduxConnectedComponent/>
</Provider>
) ? |
Aha, that was the problem. Since the initial state of the store was the only data I needed to pass to <ReduxRoot {...initialStore}/> So that meant I fixed the problem by using your correction, except with destructuring var ReduxRoot = ({store}) => { for an ever-so-satisfying elimination of six characters. I guess one way to avoid this error is if |
Glad you found the problem! Yeah, we only rely on object identity there, something more complicated seems unwarranted. |
…ctions Handling private actions is an anti-pattern. Enforce it. (Fixes reduxjs#186)
Sorry for being a bit off topic but I'm looking for a code example that demonstrates switching between different stores in react-native. This thread seems to touch the subject. |
You can't change the store passed to |
interesting... never encountered a case where I need to create 2 stores and switch between them.. |
Throwing in an answer for those who searched for the Error message in the title: Don't call Don't do this: ReactDOM.render(
<Provider store={createStore(reducers)}>
<App/>
</Provider>,
document.getElementById('root')
); The correct way is this: var store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
); |
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; const store = createStore(reducers);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={{ flex: 1 }}>
<Header title="Tech Stack" />
<LibraryList />
</View>
</Provider>
);
}
} |
Here is my solution:
The one important thing is that should not replace the file which create the redux store. In my above example is the index.tsx. |
appId used to indicate for provider that store is changed. Otherwise it look like dispatch from previous store is passed: next store isn't affected by actions reduxjs/react-redux#259 (comment)
I'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:
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 returningfalse
ifthis.props
andnextProps
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.
The text was updated successfully, but these errors were encountered: