Доступ к ownprops из store - react-router-redux

@XPRO · Регистрация: 22.12.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Предисловие: очень большой проект написан мною на ReactJS (в пакете create-react-app), недавно было принято решение прикрутить Redux т.к. поддержка стала невыносимой. Изначально роутинг в приложении был предельно прост но некрасив. Для каждого Route рендерился один и тот же компонент с разными значениями параметра "page" (на нём далее очень много чего завязано, от условного рендеринга до запросов на сервер). Логично будет с Вашей стороны сказать "напиши нормальный роутинг да и всё", но не всё так просто, приложение имеет огромную вложенность и сейчас насчитывает больше 60 компонентов, даже самый маленький компонент который находится на кончике "дерева" может потребовать текущий параметр "page", напрямую зависящий от URL. Думаю вы знакомы с термином "спагетти", от которого очень хочется избавится, но при этом не очень хочется определять текущий page в каждом компоненте, желательно чтобы значение хранилось в одном месте.

Вопрос: Когда я попробывал react-router-redux, мне понравилась такая штука как ownprops, которую можно внутри компонента получить через connect(mapStateToProps)(Сomponent), но, как оказалось эти пропсы от роутера будут доступны только компоненту, который обёрнут в <Route/>, соответственно чтобы получить нужное значение в самом низу иерархии мне опять придётся тянуть длинное спагетти. Как мне получать эти данные из стора?

Пример:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Provider store={store}>
        <BrowserRouter history={history}>
            <div>
                <Switch>
                    <Route path={baseUrl + "/br/diags"} component={TestPage}/>
                    <Route path={baseUrl + "/br"} strict render={()=>
                        <div className="main">
                            <Menu/>
                            <MenuBranch/>
                            <Route path={baseUrl + '/br/:page'} exact component={Area}/>
                        </div>
                    }/>
                </Switch>
                <div className={"fake"}/>
                <div className={"fake2"}/>
                <div className={"fake3"}/>
                <div id={"fakeText"}/>
            </div>
        </BrowserRouter>
    </Provider>

В приложении есть компонент Sz который должен отобразиться при адресе www.site.com/br/doc/sz, сейчас он ориентируется на параметр page, который ему приходит в пропсах через длинное спагетти (Area->Content->LeftSide->DocumentOperations->List->Sz). Как без спагетти получить в Sz ownprops которые даются компоненту Area?

P.S. пробывал завести поле page в store, но в итоге я не нашёл способа асинхронно обновлять его, ведь сам роутер работает асинхронно, мнебы какую нибудь "волшебную палочку" которая будет менять поле в стор при изменениях ownprops роутера...

@XPRO · 05.03.2019, 13:00 **[ТС]**

Решение оказалось очень простым, оказывается чтобы компонент получил доступ к ownprops, при вызове его достаточно обернуть в <Route></Route>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@XPRO 1 / 1 / 1 Регистрация: 22.12.2016 Сообщений: 23
	05.03.2019, 13:00 [ТС]
	Решение оказалось очень простым, оказывается чтобы компонент получил доступ к ownprops, при вызове его достаточно обернуть в <Route></Route> 0