createProvider 不是从 react-redux 导出的？

Posted 2023-02-19

【中文标题】createProvider 不是从 react-redux 导出的？

【英文标题】：createProvider is not exported from react-redux?

【发布时间】：2019-11-12 04:10:12

【问题描述】：

我正在尝试创建多个不同的 Redux 存储，因为我在“react-redux”中使用createProvider() 方法。

我已经安装了最新的 react-redux 版本（7.1.0），但我收到了类似 “createProvider 未从 react-redux 导出”的错误。当我浏览节点模块时，我无法在 react-redux 的 src 中找到createProvider。是版本问题还是我错过了代码中的某些内容。我已将以下代码 sn-p 分享给您：

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

【问题讨论】：

你不需要 createProvider 你可以直接从 react-redux 导入 Provider。如果您想使用多个商店，只需创建多个商店实例，它应该就可以工作

github.com/reduxjs/react-redux/blob/… storeKey 已被删除并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React Redux 的 Provider 和特定组件，例如：提供者>。你也可以传递一个 context : MyContext 选项来连接

【参考方案1】：

从 V6 开始似乎是 deprecated 和 removed

【参考方案2】：

在documentation 中，它说

不要在一个应用程序中创建多个商店！相反，使用 combineReducers 从多个中创建一个根 reducer。

所以一个提供者，一个商店和多个reducer是使用redux的正确（推荐）方式。为您的应用程序创建一个全局提供程序并为该提供程序定义您的减速器。您可以为组件使用数据选择器。

对于这些信息，开发团队可能决定弃用 createProvider 功能。

【参考方案3】：

我正在尝试创建多个不同的 Redux 存储

在单个 React 应用程序中拥有多个不同的 Redux 存储是很好的。只是不要使用createProvider()。拥有多个独立 Redux 存储的两种方法是：

使用 Redux sub-apps:

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

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

通过这种方法，多个 Redux 存储将共存。

在单个 React 应用程序中使用多个 SPA - 请参阅 crisp-react。使用这种方法，多个 Redux 存储将不共存。当您构建清晰反应时，它会创建一个具有 2 个 SPA 的 React 应用程序，您可以将 Redux 添加到每个 SPA。然后，您可以从一个 SPA（及其 Redux 商店）切换到另一个 SPA 及其商店。

【参考方案4】：

您的商店可能是这样的：

// store.js

import  createStore  from 'redux';
import rootReducer from './root-reducer';

export default createStore(rootReducer);

而“rootReducer”是不同reducer文件的组合：

//root-reducer.js

import SomeReducers from './reducers/some-reducers';
import AnotherOne from './reducers/another-one';

const rootReducer = combineReducers(
  SomeReducers,
  AnotherOne,
)

export default rootReducer;

那么你的店铺用在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')
);

但它仍然只是一个store