【发布时间】：2024-04-11 08:20:02
【问题描述】：
我正在使用 React 和 Redux 通过 Google Firebase 创建登录系统。我试图了解如何使用 thunk。我从我的 React 组件调用我的操作 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)));
}
}
还有我的减速机：
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;
}
}
我知道对 Google firebase 的实际请求是可以的，因为 createUserSuccess 动作创建者被解雇了。为什么执行没有在我的 React 组件中的适当位置停止？
【问题讨论】：
-
你能在这里更新你的容器吗？
-
如果在调用
createUserSuccess(user)之后在 catch 回调中捕获到错误，则该函数或您的 reducer 中可能存在引发异常的内容。你能分享你的reducer代码吗？ -
@NikolajDamLarsen 我也这么认为，但我找不到我的减速器代码有什么问题。我在上面加了。
-
是的，我也没有发现任何问题。我相信这是故意的，您的状态是数组而不是对象？错误被捕获时会说什么？
标签： reactjs redux react-redux redux-thunk