为什么我的 redux 动作没有正确触发?

Why are my redux actions not firing correctly?

我正在尝试对使用 redux 和 firebase 的 login/logout 用户实施身份验证检查。我有以下代码:
动作类型:

export const LOGIN_REQ = 'AUTH_REQ';
export const LOGOUT_REQ = 'LOGOUT_REQ';
export const AUTH_SUCCESS = 'AUTH_SUCCESS';
export const AUTH_FAILED = 'AUTH_FAILED';
export const GET_AUTH = 'GET_AUTH';

减速器:

import * as ActionTypes from './ActionTypes';
export const auth = (state = {
    isAuth: false,
    user: null
}, action) => {
    switch (action.type) {
        case ActionTypes.LOGIN_REQ:
            return { ...state, isAuth: false, user: null };
        case ActionTypes.LOGOUT_REQ:
            return { ...state, isAuth: false, user: null };
        case ActionTypes.AUTH_FAILED:
            return { ...state, isAuth: false, user: null };
        case ActionTypes.AUTH_SUCCESS:
            return { ...state, isAuth: true, user: action.payload };
        case ActionTypes.GET_AUTH:
            return state;
        default:
            return state;
    }
}

帅哥:

export const getAuth = () => (dispatch) => {
    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            console.log('Get AUTH called');
            dispatch(authSuccess());
        }
        else {
            console.log('Get AUTH called');
            dispatch(authFailed());
        }
    });
}

export const loginReq = (email, password, remember) => (dispatch) => {
    firebase.auth().signInWithEmailAndPassword(email, password)
        .then((cred) => {
            if (remember === false) {
                firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);
                console.log('Logged In with Redux without persist');
            }
            else {
                console.log('Logging in with Persist');
            }
            console.log('Dispatching Success !');
            dispatch(authSuccess(cred.user.uid));
        })
        .catch((err) => {
            console.log(err);
            dispatch(authFailed(err));
        });
}

export const logoutReq = () => (dispatch) => {
    firebase.auth().signOut()
        .then(() => dispatch(getAuth()))
        .catch((err) => console.log(err));
}

export const authSuccess = (uid = null) => ({
    type: ActionTypes.AUTH_SUCCESS,
    payload: uid
});

export const authFailed = (resp) => ({
    type: ActionTypes.AUTH_FAILED,
    payload: resp
});

我从组件调用它,如下所示:

const mapStateToProps = state => {
    return {
        isAuth: state.isAuth,
        user: state.user
    }
}

const mapDispatchToProps = dispatch => ({
    getAuth: () => { dispatch(getAuth()) },
    loginReq: (email, password, remember) => { dispatch(loginReq(email, password, remember)) },
    logoutReq: () => { dispatch(logoutReq()) }
})  
handleLogin() {
       this.props.loginReq(this.state.email, this.state.password, this.state.remember);
  }
handleLogOut() {
        this.props.logoutReq();
    }
<BUTTON onClick=()=>this.handleLogOut()/handleLogin()>

我快要哭了,因为我无法弄清楚为什么即使我单击一次按钮,我的 loginReq 也会触发一个或多个 gitAuth() 方法。这仅发生在 loginReq() 操作中。我没有在任何地方指定 loginReq() 应该触发它。 我还调用了组件中的 getAuth() 方法 did 我的主屏幕的挂载方法,该方法在应用程序启动时检查一次身份验证状态。
编辑:我在组件中登录了控制台,在主组件中执行了 mount 方法,所以我知道这个 getAuth() 调用不是来自那里。

我的一个朋友告诉我这与 firebase 提供的 onAuthStateChange() 中称为 'Observer' 的东西有关。基本上,我手动将用户视为已通过身份验证与观察者这样做之间存在冲突。

我猜这个答案做得不好,尝试重组它更好,你所说的"Thunks"实际上是"Actions"。但是,如果我要告诉您一些可能有帮助的事情,那就是问题可能出在 thunk 中间件配置或调度程序处理 firebase 的方式上,所以我会说您最好尝试使用 react-redux 编写一个 apporach -firebase 库(这个:http://react-redux-firebase.com/docs/getting_started)它可以更容易地将 redux 与 firebase 后端连接起来。另一个很棒的参考资料是 The Net Ninja 的关于 react、redux 和 firebase 的教程播放列表。