如何在React Redux中为单个商店使用多个提供程序

问题描述

我有一个商店，负责管理两个组件A和B的状态。

我将每个组件都包装在这样的提供程序中，这些组件是通过我公司的sdk工具渲染的，我无法更改，因此我使用两个提供程序的原因是

A.js

import { store } from './store';

<Provider store={store}>
  <A />
</Provider>

B.js

import { store } from './store';

<Provider store={store}>
  <B />
</Provider>

store.js

export const store = createStore(combineReducers(mainReducer,AReducer,BReducer));

我将动作设置为调度由B的化简器处理的另一个动作，以便这两个组件可以共享状态。但是，当我在A组件中执行操作时，reducer在A上工作正常，但在B上却没有启动。有没有办法使用两个同级提供程序组件来完成这项工作？

解决方法

react-redux应用程序的结构是有一个主App.js，您可以在其中处理路由，组件加载等。然后在index.js中导入并呈现该应用程序。

如果您遵循此结构，则您所要做的就是使用Redux提供程序包装App。然后，您的index.js如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from "./redux/store";

ReactDOM.render(
  <Provider store={store()}>
    <App />
  </Provider>,document.getElementById('root'));

serviceWorker.unregister();

现在剩下的就是将组件导入App.js并根据需要使用它们。

编辑：有可能，但是我仍然认为您对如何在一个应用程序中设置组件导入感到困惑。无论如何，您可以尝试以下方法：

import React from "react";
import "./styles.css";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import Component1 from "./component1";
import Component2 from "./component2";
import store from "./redux/store";

ReactDOM.render(
  [
    <Provider store={store} key="1">
      <Component1 />
    </Provider>,<Provider store={store} key="2">
      <Component2 />
    </Provider>
  ],document.getElementById("root")
);

您可以在codesanbox

上找到有效的代码沙箱。