"Changing store on the fly" error when embedding <Provider> in a stateless component

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:

var ReduxRoot = props => (
    <Provider store={props}>
        <ReactReduxConnectedComponent/>
    </Provider>
)

It works fine, but any time the parent component re-renders, a <Provider> does not support changingstoreon 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.

[totymedli]

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:

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')
);

[carslan]

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>
      
    );
  }
}