Я использую connected-react-router
и имею несколько типов страниц: главная, внутренняя, аутентификация, администратор. Зависит от типа текущей страницы, я отрисовываю определенные компоненты. Теперь это работает следующим образом: в моем config
редукторе есть 4 подпорки со значениями bool: isMainPage, isInnerPage, isAdminPage, isAuthPage
, и только один из них может быть истинным за раз. Они меняются каждый раз, когда я меняю местоположение (выполняя определенное действие в componentDidMount
). Итак, я хочу разобраться с connected-react-router
и, если это возможно, передать эти реквизиты из редуктора конфигурации в маршрутизатор. Затем, если возможно, я хочу выполнить действие, которое определит текущий тип страницы и установит его, а затем я получу это значение в компонентах. Это все возможно? Извините за это объяснение - я только учусь.
Я хотел бы предоставить некоторый код, но я не знаю, какая часть могла бы быть полезной - попросите один, пожалуйста
редуктор конфигурации:
import {
SET_VIEW_MODE,
SET_AUTH_PAGE,
SET_MAIN_PAGE,
SET_INNER_PAGE,
SET_ADMIN_PAGE,
...
} from '../constants';
...
case SET_AUTH_PAGE:
return {
...state,
isAuthPage: true,
isMainPage: false,
isInnerPage: false,
isAdminPage: false
};
case SET_MAIN_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: true,
isInnerPage: false,
isAdminPage: false
};
case SET_INNER_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: false,
isInnerPage: true,
isAdminPage: false
};
case SET_ADMIN_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: false,
isInnerPage: false,
isAdminPage: true
};
действия конфигурации:
...imports;
export const actionSetViewMode = () => ({ type: SET_VIEW_MODE });
export const actionSetAuthPage = () => ({ type: SET_AUTH_PAGE });
export const actionSetMainPage = () => ({ type: SET_MAIN_PAGE });
export const actionSetInnerPage = () => ({ type: SET_INNER_PAGE });
пример компонента, который устанавливает любой тип:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionSetMainPage } from '../actions/configActions';
...
class MainPage extends Component {
componentDidMount() {
this.props.actionSetMainPage();
}
render() {
return (
<>
...
</>
)
}
}
export default connect(null, {
actionSetMainPage,
})(MainPage);
пример компонента, который отображает любой, зависит от типа страницы:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import Subaction from '../components/header/Subaction';
import Back from '../components/header/Back';
import Menu from '../components/header/Menu';
import Title from '../components/header/Title';
import Logo from '../components/header/Logo';
import Notification from '../components/header/Notification';
class Header extends Component {
render() {
const { isAdaptive, isAuthPage, isMainPage, isInnerPage, title } = this.props.config;
return (
!isAuthPage &&
<header>
<div className="h-inner">
...
{
isMainPage &&
<Logo></Logo>
}
<Notification></Notification>
...
</div>
</header>
)
}
}
export default connect(state => ({
config: state.config
}), {})(Header);