Как подключить хранилище Redux к динамически создаваемым компонентам вне root? - PullRequest
Новая
       14

Как подключить хранилище Redux к динамически создаваемым компонентам вне root?

0 голосов
/ 12 марта 2019

Я работаю над интерфейсной панелью администратора. Это позволяет редактировать каждый элемент / виджет на сайте.

Существует панель администратора, которая подключена к Redux и из которой вы можете активировать редакцию. Когда вы нажимаете кнопку редактирования, на каждый элемент div / widget, который имеет класс CSS button-edit-quick-normal на странице, добавляется рендер EditModeButton. Пожалуйста, смотрите код ниже. 

enableEditMode = () => {

    //Catch all of div/widget with class .button-edit-quick-normal
    let buttonEditQuickNormal = [...document.querySelectorAll('.button-edit-quick-normal')];

    //loop through array of DOM elements and render new react component
    buttonEditQuickNormal.map(domContainer => {
        ReactDOM.render(<EditModeButton
            menuType={'quick-normal'}
            handleSingleMenuActivated={this.handleSingleMenuActivated}
            singleMenuActivated={this.state.singleMenuActivated}
        />, domContainer);
    });
 }

Мой провайдер выглядит так: 

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
// import ThemeApp from 'SBAppsThemes/ThemeApp';
import { SiteEditorPortal } from './index_sitebuilder';
import { AdminbarPortal } from './index_adminbar';


const store = createStore(AppReducer, compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f));

       ReactDOM.render(
         <Provider store={store}>
            <React.Fragment>
                <AdminbarPortal />
                <SiteEditorPortal />
            </React.Fragment>
        </Provider>,
        document.getElementById('root-react-portals'));

А вот админбар и SiteEidtorProtal ReactDOM.render: 

import SiteEditor from 'SBAppsBuilder/containers/SiteEditor';
import ReactDOM from 'react-dom';
import Root from 'SiteBuilder/boot/root';

export const SiteEditorPortal = () => ReactDOM.createPortal(<SiteEditor/>, document.getElementById('root-sitebuilder'))

. 

import React from 'react';
import ReactDOM from 'react-dom';
import Adminbar from 'SBAppsAdminbar/Adminbar';


export const AdminbarPortal = () => ReactDOM.createPortal(<Adminbar />, document.getElementById('root'))

У меня вопрос, как добавить динамически созданные компоненты в хранилище избыточностей?

пс. Я уже подключался к отдельному компоненту ReactDOM.render через порталы React, но в этом случае они создаются динамически.

...