reactjs - 如何在路由器减速器中管理自定义道具，如“isInnerPage”？

Question

我使用connected-react-router并拥有一些类型的页面：main、inner、auth、admin。取决于当前页面类型，我呈现某些组件。现在它以这种方式工作：我的configreducer 中有 4 个 props 具有 bool 值: isMainPage, isInnerPage, isAdminPage, isAuthPage，并且一次只能有一个为真。每当我更改位置时，它们都会更改（通过在 中执行某些操作componentDidMount）。所以，我想处理connected-react-router，如果可能的话，将这些 props 从 config reducer 传递到路由器。然后，如果可能的话，我想执行一个操作来定义当前页面类型并设置它，然后我会在组件中获得这个 val。这一切都有可能吗？对不起这个解释 - 我只是在学习。

我会提供一些代码，但我不知道哪一部分会有所帮助 - 请要求提供

配置减速器：

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);

标签： reactjsreduxconnected-react-router