Question

我正在使用React和Redux创建一个使用Google Firebase的登录系统。我想了解如何使用thunk。我从我的React组件调用我的操作contentOffSet但是，我无法成功处理回调。

这是我调用动作的组件函数：

createUser

以下是行动：

registerUser() {
    let email = this.state.user.email;
    let pw= this.state.user.password;

    this.props.actions.createUser(email, pw)
        .then((user) => {
            debugger; // The async request is successful but execution doesn't pause here
        })
        .catch((error) => {
            debugger; // Instead I receive an error here that says, "Uncaught (in promise) RangeError: Maximum call stack size exceeded"
        });
}

我的减速机：

export function createUserSuccess(user) {
    debugger;
    return { type: types.CREATE_USER_SUCCESS, payload: { registeredUser: user, registerMsg: 'Successful Registration!'  }};
}

export function createUserError(error) {
    return { type: types.CREATE_USER_ERROR, payload: { registeredUser: {}, registerMsg: error.message }};
}


export function createUser(email, pw) { // async thunk
    debugger;
    return (dispatch) => {
        debugger;
        return firebase.auth().createUserWithEmailAndPassword(email, pw)
            .then((user) => {dispatch(createUserSuccess(user))}) // todo: figure out why this won't resolve
            .catch(error => dispatch(createUserError(error)));
    }
}

}

我知道对Google Firebase的实际请求是正常的，因为import * as types from '../actions/actionTypes'; import initialState from './initialState'; export default function registerReducer(state = initialState.registeredUser, action) { debugger; switch (action.type) { case types.CREATE_USER_SUCCESS: return [ ...state, // es6 spread operator - explodes all values in array Object.assign({}, action.payload) ]; case types.CREATE_USER_ERROR: return [ ...state, Object.assign({}, action.payload) ]; default: return state; }操作创建者被解雇了。为什么执行不在我的React组件中的适当位置停止？

Answer 1

您可以在此处查看此实施

当我们读取用户身份验证并将值设置为Redux时的服务 https://github.com/x-team/unleash/blob/develop/app/services/authService.js
将用户状态设置为redux状态对象时的reducer https://github.com/x-team/unleash/blob/develop/app/reducers/userReducer.js
动作创作者 https://github.com/x-team/unleash/blob/develop/app/actions/UserActions.js

最重要的部分是authService，让我知道任何问题

React-Redux中的Thunk - 没有解决？

1 个答案: