firebase - React Native/Redux/Firebase - onAuthStateChanged 未调度

Question

我正在尝试使用 React Native/Redux/Firebase 进行登录过程，但遇到了一些问题......

我尝试实现 onAuthStateChanged 来分派(dispatch)操作，但它没有按我想要的方式工作。

它适用于两种情况:

1 - 我直接在组件中实现 onAuthStateChanged ，如下所示:

componentDidMount() {
    firebaseAuth.onAuthStateChanged()
        .then((user) => {
            if (user) {
                Actions.home();
            } else {
                Actions.login();
            }
        });
}

2 - 我将其作为带有 redux-thunk 的操作来实现，但没有调度(但随后我无法调度操作并重定向到正确的路线)

export const isAuthenticated = () => {
    firebaseAuth.onAuthStateChanged()
        .then((user) => {
            if (user) {
                console.log("launch.action#isAuthenticated - user already connected");
            } else {
                console.log("launch.action#isAuthenticated - user not connected");
            }
        });

};

我想做的是这个(但不起作用):

export const isAuthenticated = () => {
return (dispatch) => {
    firebaseAuth.onAuthStateChanged()
        .then((user) => {
            console.log('user', user);
            if (user) {
                console.log("launch.action#isAuthenticated - user already connected");
                dispatch(isUserConnected(true));
            } else {
                console.log("launch.action#isAuthenticated - user not connected");
                dispatch(isUserNotConnected(true));
            }
        });
};

};

有人可以解释一下为什么它不适用于调度吗？

谢谢!

Answer 1

有两件事:

1. 使用一个函数(例如，isUserConnected)并将值设置为 true 或 false(而不是使用两个函数)不同的函数，isUserNotConnected 和 isUserConnected，就像您当前一样)

2. 按照 firebase documentation 将 firebaseAuth 更改为 firebase.auth()

<小时/>

试试这个。

(这对我有用)

在 Redux 中(操作):

// Firebase
import firebase from 'firebase';

// Redux Function
export const testFirebaseInRedux = () => {
  return (dispatch, getState) => {
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log("testFirebaseInRedux: logged in");
        dispatch(isUserConnected(true));
      } else {
        console.log("testFirebaseInRedux: not logged in");
        dispatch(isUserConnected(false));
      }
    })
  }
}

export const isUserConnected = (payloadToSet) => {
  return {
    type: 'IS_USER_CONNECTED',
    payload: payloadToSet
  }
}

在 Redux( reducer )中:

export default function (state=initialState, action) {
  switch(action.type) {
  case 'IS_USER_CONNECTED':
    return {
      ...state,
      isUserConnected: action.payload
    }
  default:
    return {
        ...state
    }
  }
}

组件:

// Libraries
import React from 'react';

// Redux
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {testFirebaseInRedux} from './../actions/index.js';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.testFirebaseInRedux()
  }

}

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

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
      testFirebaseInRedux: testFirebaseInRedux,
    }, dispatch)
}


export default connect(mapStateToProps, matchDispatchToProps)(YourComponent);