如何在react redux中为单个存储使用多个提供程序

Question

我有一个单独的存储，用于管理两个组件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的reducer处理的另一个操作，以便这两个组件可以共享状态。然而，当我在A组件中执行操作时，减速器对A工作良好，但对B不起作用。有没有一种方法可以使用两个同级提供程序组件来实现这一点？

Answer 1

react redux应用程序的结构是有一个主app.js，在那里你可以处理路由、组件加载等。然后在你的index.js中导入并渲染应用程序。

如果你遵循这个结构，那么你所需要做的就是用redux提供者包装应用程序。你的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