createProvider 不是从 react-redux 导出的吗？

Question

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

Answer 1

似乎自 V6 以来已弃用并删除

Answer 2

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

Answer 3

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.

Answer 4

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:

• Use Redux sub-apps:

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.