Как интегрировать аутентификацию Firebaseui с Redux - PullRequest
Новая
       19

Как интегрировать аутентификацию Firebaseui с Redux

0 голосов
/ 13 мая 2019

У меня есть рабочая конфигурация аутентификации, настроенная с помощью firebaseui. У меня есть личная целевая страница, на которую я бы хотел перенаправить пользователя, но я не уверен, как передать проверенный ответ в мое хранилище избыточных данных.

Я в основном хочу вызвать метод handleClickLogin (в настоящее время подключенный к фиктивной кнопке) моего компонента Home из моего signInSuccess обратного вызова. Другими словами, я пытаюсь dispatch(login());, когда я получаю успешный вход, что, в свою очередь, добавляет флаг в мое хранилище редуксов, которое я затем могу использовать, чтобы открыть свою личную целевую страницу. Поскольку 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);

1 Ответ

0 голосов
/ 13 мая 2019

Каким-то образом ввод вопроса помог мне понять это.Просто нужно импортировать магазин и соответствующее действие, а затем отправить его напрямую. 

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

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