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