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

Question

我已经使用 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);

Answer 1

输入问题以某种方式帮助我弄明白了。只需要导入商店和适当的操作，然后直接派发它。

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

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

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

How to integrate Firebaseui auth with Redux

javascript

firebase

reactjs

redux

firebaseui