Несколько экземпляров приложения React на одной странице - PullRequest
Новая
       22

Несколько экземпляров приложения React на одной странице

0 голосов
/ 15 января 2020

Здравствуйте, у меня есть приложение React Redux, созданное и извлеченное из приложения Create React. Я хотел бы сделать это приложение дважды на одной веб-странице. Наша главная веб-страница не использует React, но эти определенные c части будут. Я построил приложение, и оно прекрасно отрисовывается, когда рендерит его только один раз, но когда я отрисовываю его дважды на двух отдельных узлах DOM, значения, которые я изменяю во втором приложении, обновляются в первом. Похоже, что они разделяют состояние между двумя приложениями.

По моим исследованиям, это вполне достижимая цель. Я читал, что это может быть вызвано также сборкой веб-пакета, хотя я хотел бы избежать включения нескольких одинаковых сценариев на страницу только для создания уникальной сборки ( см. Эту ссылку ). Я ищу помощь в рендеринге двух уникальных экземпляров моего приложения. Код ниже root моего приложения: 

const one = document.querySelector('[data-dfa=local]');
const two = document.querySelector('[data-dfa=local2]');

const store = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store}>
    <FieldAppointment appId='one' />
  </Provider>, one);

ReactDOM.render(
  <Provider store={store}>
    <FieldAppointment appId='two' />
  </Provider>, two);

1 Ответ

0 голосов
/ 15 января 2020

Вы используете один и тот же магазин для обоих экземпляров. Когда что-то в одном приложении обновляет магазин, они оба получают это изменение. Может быть, разбить его на два отдельных магазина?: 

const store1 = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const store2 = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store1}>
    <FieldAppointment appId='one' />
  </Provider>, one);

ReactDOM.render(
  <Provider store={store2}>
    <FieldAppointment appId='two' />
  </Provider>, two);
...