Как использовать несколько поставщиков для одного хранилища в react redux

#javascript #reactjs #redux #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 ‘s reducer, чтобы эти два компонента могли совместно использовать состояние. Однако, когда я выполняю действие в A компоненте, редуктор работает нормально A , но он не запускается B . Есть ли способ заставить это работать, используя два родственных компонента поставщика?

1. Идея управления состоянием Redux заключается в том, чтобы иметь единый источник достоверности, который является хранилищем, для всего приложения; почему вы используете двух разных поставщиков для двух разных компонентов, а не одного поставщика для всего приложения?

2. Каким будет вариант использования для двух поставщиков? Если оба поддерева имеют одинаковое состояние приложения, я не вижу причин не помещать их в один и тот же поставщик.

3. Я забыл упомянуть, что я ограничен использованием двух поставщиков, поскольку я визуализирую эти компоненты с помощью инструментов sdk от моей компании.

Ответ №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