Question

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

我基本上想从我的handleClickLogin回调中调用Home组件的signInSuccess方法（当前已挂接到虚拟按钮）。换句话说，当我成功登录时，我尝试登录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 auth与Redux集成

1 个答案: