如何将Firebaseui auth与Redux集成

Question

I've got a working auth configuration set up using firebaseui. I have a private landing page that I'd like to redirect the user to, but I'm not sure how to pass the credentialed response into my redux store.

I basically want to call the handleClickLogin method (currently hooked to a dummy button) of my Home component from my signInSuccess callback. In other words I'm trying to dispatch(login()); when I get a successfull signin, which in turn adds the flag to my redux store which I can then use to gate my private landing page. Since firebase.js is not in the component tree, I don't have access to dispatch here, so how do I get the response hooked in to my store?

firebase.js

const uiConfig = ({
  // signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
        signInSuccess: (resp) => <<<???>>>,
    },
});

firebase.initializeApp(config);
const ui = new firebaseui.auth.AuthUI(firebase.auth());

export const startFirebaseUI = elementId => {
  ui.start(elementId, uiConfig);
};

Home.jsx (stripped down)

export class Home extends React.PureComponent {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired,
  };

  componentDidMount = () => {
    startFirebaseUI('#firebaseui-auth-container');
  }

  handleClickLogin = () => {
    const { dispatch } = this.props;

    dispatch(login());
  };

  render() {
    const { user } = this.props;

    return (
      <Background>
        <HomeContainer>
          <Button
            onClick={this.handleClickLogin}
          >
            <Text ml={2}>Start</Text>
          </Button>
          <div id="firebaseui-auth-container" />
        </HomeContainer>
      </Background>
    );
  }
}

function mapStateToProps(state) {
  return { user: state.user };
}

export default connect(mapStateToProps)(Home);

Answer 1

Somehow typing the question helped me figured it out. Just needed to import the store and the appropriate action, then dispatch it directly.

import { store } from 'store/index';
import { login } from 'actions/index';

callbacks: {
    signInSuccess: (resp) => store.dispatch(login(resp)),
}