Как мне управлять пользовательскими реквизитами, такими как isInnerPage, в редукторе маршрутизатора? - PullRequest
0 голосов
/ 03 февраля 2020

Я использую 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);
...