Question

我正在尝试执行身份验证检查，并使用redux和firebase登录/注销用户。我有以下代码：
动作类型：

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（）应该触发它的任何地方。我也已经在主屏幕的component did mount方法中调用了getAuth（）方法，该方法在应用程序启动时会检查一次身份验证状态。
编辑：我已经在主组件中的组件中执行了登载方法的控制台登录，所以我知道此getAuth（）调用不是从那里来的。

Answer 1

Imo的答案做得不好，请尝试更好地重新构造它，您所谓的“ Thunks”实际上是“ Actions”。但是，如果我要告诉您的事情可能有所帮助，则可能是问题出在笨拙的中间件配置中，或者调度程序对firebase进行了良性处理，因此我想您最好尝试使用react-redux编码方法-firebase库（该库：http://react-redux-firebase.com/docs/getting_started），它可以更轻松地将redux与firebase后端连接。我从中学到的其他参考书是The Net Ninja的关于react，redux和firebase的教程播放列表。

Answer 2

我的一个朋友告诉我，这与firebase提供的onAuthStateChange（）中称为“观察者”的东西有关。基本上，我手动认为用户已通过身份验证与观察者这样做之间存在冲突。

为什么我的redux操作无法正确触发？

2 个答案: