如何将 Firebaseui 身份验证与 Redux 集成答案

【问题标题】：How to integrate Firebaseui auth with Redux如何将 Firebaseui 身份验证与 Redux 集成
【发布时间】：2019-05-12 21:09:35
【问题描述】：

我已经使用 firebaseui 设置了有效的身份验证配置。我有一个私人登录页面，我想将用户重定向到该页面，但我不确定如何将凭据响应传递到我的 redux 商店。

我基本上想从我的signInSuccess 回调中调用我的 Home 组件的handleClickLogin 方法（当前连接到一个虚拟按钮）。换句话说，当我成功登录时，我正在尝试dispatch(login());，这反过来又将标志添加到我的 redux 商店，然后我可以用它来控制我的私人登录页面。由于 firebase.js 不在组件树中，所以我无法在此处访问 dispatch，那么如何将响应挂接到我的商店？

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（精简）


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

【问题讨论】：

react-redux-firebase 对你来说可能也很有趣react-redux-firebase.com/docs/auth.html

标签： javascript reactjs firebase redux firebaseui

【解决方案1】：

不知何故，输入问题帮助我弄清楚了。只需要导入 store 和相应的 action，然后直接 dispatch。

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

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

【讨论】：