0
React와 Redux를 사용하여 Google Firebase로 로그인 시스템을 만듭니다. 썽크 사용법을 이해하려고합니다. 내 반응을 구성 요소에서 createUser 내 전화를 부르고 있지만, 콜백을 성공적으로 처리 할 수 없습니다. 여기 React-Redux의 썽크 - 해결되지 않았습니까?
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;
}
}
나는 실제를 알고있다. createUserSuccess 조치 작성자가 해고되기 때문에 Google 기반 시설에 대한 요청은 정상입니다. React 구성 요소의 적절한 위치에서 실행이 중지되지 않는 이유는 무엇입니까?
여기에 컨테이너를 업데이트 할 수 알려입니까? –
캐치 콜백에 오류가 잡히면,'createUserSuccess (user)'가 호출 된 후에 그 함수 나 감속기에서 예외를 throw하는 것이있을 수 있습니다. 감속기 코드를 공유 할 수 있습니까? –
@ NikolajDamLarsen 나도 그렇게 생각했지만 내 감속기 코드에 문제가 있음을 발견하지 못했습니다. 나는 그것을 위에 덧붙였다. – mbrashid62