I am trying to create multiple distinct Redux stores, for that am using createProvider() method in 'react-redux'.
I have installed the latest react-redux version(7.1.0), but am getting the error like "createProvider is not exported from react-redux". When i gone through the node modules, i couldn't able to find the createProvider inside the src of react-redux. Is it a version issue or did i miss something in the code. I have shared you the following code snippet as :
Provider.js
import { createProvider } from "react-redux";
export const STORE_KEY = "myComponentStore";    
export const Provider = createProvider(STORE_KEY);
TestComponent.js
import React, { Component } from "react";
import { createStore } from "redux";
import Mycomponent from "./MyComponent";
import { Provider } from "./Provider";
const reducer = {};
const initialState = {
  title: "multiple store"
};
const store = createStore(reducer, initialState);
class TestComponent extends Component {
  render() {
    return (
      <Provider store={store}>
        <Mycomponent />
      </Provider>
    );
  }
}
export default TestComponent;
Mycomponent.js
import React, { Component } from "react";
import { connect } from "./Connect";
class MyComponent extends Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}
export default connect(function mapStateToProps(state) {
  return {
    title: state.title
  };
})(MyComponent);
                Seems like it is deprecated and removed since V6
Your store could be something like this:
// store.js
import { createStore } from 'redux';
import rootReducer from './root-reducer';
export default createStore(rootReducer);
And that "rootReducer" is a combination of different reducer files:
//root-reducer.js
import SomeReducers from './reducers/some-reducers';
import AnotherOne from './reducers/another-one';
const rootReducer = combineReducers({
  SomeReducers,
  AnotherOne,
})
export default rootReducer;
Then your store is used in the index
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import store from "./storage/store";
import App from './App';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root')
);
But it still just one store
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With