Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

createProvider is not exported from react-redux?

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);
like image 350
John_ny Avatar asked Jul 01 '19 13:07

John_ny


2 Answers

Seems like it is deprecated and removed since V6

like image 114
Sagiv b.g Avatar answered Oct 21 '22 14:10

Sagiv b.g


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

like image 1
pmiranda Avatar answered Oct 21 '22 12:10

pmiranda