在启动组件的外部访问Google GAPI Auth实例

Question

我在React中有一个GoogleAuth组件，用于初始化GAPI以通过Google登录。我得到了一个AUTH实例，可以用来登录和注销。

问题是，我在单独的NavBar组件中有另一个按钮，我想使用相同的AUTH实例并允许用户从中注销。我不确定是否可以将整个Google AUTH实例添加到Redux存储中并使用它，或者我该如何使用从初始化GAPI AUTH实例的另一个组件访问signOut函数。

初始化了GAPI的GoogleAuth组件

import React from 'react';
import { connect } from 'react-redux';
//import { Redirect } from 'react-router-dom';
import { signIn, signOut } from '../actions';

class GoogleAuth extends React.Component {

    componentDidMount() {
        window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: 'mykey.apps.googleusercontent.com',
                scope: 'email'
            }).then(() => {
                this.auth = window.gapi.auth2.getAuthInstance();
                this.onAuthChange(this.auth.isSignedIn.get());
                this.auth.isSignedIn.listen(this.onAuthChange);
            });
        });
    }

    onAuthChange = (isSignedIn) => {
        if (isSignedIn) {
            this.props.signIn(this.auth.currentUser.get().getId());
        } else {
            this.props.signOut();
        }
    };

    onSignInClick = () => {
        this.auth.signIn();

    };

    onSignOutClick = () => {
        this.auth.signOut();
    };

    renderAuthButton() {
        if (this.props.isSignedIn === null) {
            return null;
        } else if (this.props.isSignedIn) {
            // return <Redirect to='/dashboard' />;
            return (
                <button onClick={this.onSignOutClick} className="ui red google button">
                    <i className="google icon" />
                    Sign Out
                </button>
            );
        } else {
            return (
                <button onClick={this.onSignInClick} className="ui green google button">
                    <i className="google icon" />
                    Sign In with Google
                </button>
            );
        }
    }

    render() {
        return <div>{this.renderAuthButton()}</div>
    }
}

const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn, auth: state.auth };
};

export default connect(mapStateToProps, { signIn, signOut })(GoogleAuth);

NavBar组件，我想在其中再次使用AUTH实例并允许用户注销

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    Menu,
    Button,
    Icon
} from 'semantic-ui-react';
import { signIn, signOut } from '../actions';

class NavBar extends React.Component {

    state = {}

    onSignOutClick = () => {
        this.props.signOut();
        this.props.auth.signOut();  //  THROWS ERROR SAYING NO FUNCTION EXISTS
    };

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })

    renderMenu() {
        const { activeItem } = this.state
        if (this.props.isSignedIn === null ||
            this.props.isSignedIn === false) {
            return (
                <Menu
                    inverted
                    pointing
                    size='large'
                >
                    <Menu.Item>
                        <Icon name="briefcase" className="resumeIcon" />
                    </Menu.Item>
                    <Menu.Item
                        as={Link} to='/'
                        name='home'
                        active={activeItem === 'home'}
                        onClick={this.handleItemClick} />
                    <Menu.Menu position='right'>
                        <Menu.Item
                            as={Link} to='/login'
                        >
                            <Button color='grey'>Login</Button>
                        </Menu.Item>
                        <Menu.Item
                            as={Link} to='/login'
                        >
                            <Button color='blue'>Sign Up</Button>
                        </Menu.Item>

                    </Menu.Menu>
                </Menu>
            );
        } else if (this.props.isSignedIn) {
            return (
                <Menu
                    pointing
                    size='large'

                >
                    <Menu.Item>
                        <Icon name="briefcase" className="resumeIcon" />
                    </Menu.Item>
                    <Menu.Item
                        as={Link} to='/dashboard'
                        name='dashboard'
                        active={activeItem === 'dashboard'}
                        onClick={this.handleItemClick}
                    />
                    // I want this button to logout from Google using the AUTH instance function signOut()
                    <Menu.Menu position='right'>
                        <Menu.Item>
                            <Button color='red' onClick={this.onSignOutClick} className="ui red google button">Logout</Button>
                        </Menu.Item>
                    </Menu.Menu>
                </Menu>
            );
        }
    }

    render() {
        //const { activeItem } = this.state
        return (
            <div>{this.renderMenu()}</div>
        );
    }
}

const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn, auth: state.auth };
}

export default connect(mapStateToProps, { signIn, signOut })(NavBar);