createProvider is not exported from react-redux?

user_8972966 0
Viewed 5806

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);
react-redux redux react-hooks reactjs javascript
4 Answers
user_31488070

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

user_35413200

In documentation, it says

Don't create more than one store in an application! Instead, use combineReducers to create a single root reducer out of many.

So one provider, one store and multiple reducers are the correct(recommended) way to use redux. Create one global provider for your application and define your reducers for that provider. You can use data selectors for your components.

For this information probably dev team decided to deprecate createProvider functionality.

user_30304950

I am trying to create multiple distinct Redux stores

It's fine to have multiple and distinct Redux stores in a single React application. Just don't use createProvider() for it. The two approaches to having multiple independent Redux stores are:

SubApp5.js
----------
const store = createStore(reducer)

return {
  <>
    <Provider store={store}>
      <MyTable />
    </Provider>
  </>
}

With this approach multiple Redux stores will coexist.

  • Use multiple SPAs inside a single React application - see crisp-react. With this approach multiple Redux stores will not coexist.
    When you build crisp-react, it creates a React application with 2 SPAs and you can add Redux to each SPA. Then you can switch from one SPA (and its Redux store) to another SPA and its store.
user_120054250
Related