인프런 커뮤니티 질문&답변
post 요청이 가지 않습니다.
작성
·
346
0
코드를 아래와 같이 제대로 작성하였고, 백엔드 서버도 잘 돌아가는거 확인했습니다. 그런데 서브밋 버튼을 누르고 데브툴 네트워크 탭을 보면 post 리퀘스트가 전혀 뜨지 않습니다. 의심되는 이유는 에러메세지
'4. WrappedApp created new store with withRedux(App) {initialState: undefined, initialStateFromGSPorGSSR: undefined}'
가 뜨는데, 리덕스의 이니셜 스테이트가 undefined이라니 왜 이렇게 된걸까요? 리듀서에 스테이트들 다 잘 적혀있는데 혹시 이 에러 때문에 디스패치 자체가 안되고 있는 걸까요? 리듀서 문제라기엔 백엔드 서버 없이 더미데이터로 돌리면 잘 됐었기 때문에 왜인지 도통 모르겠습니다.
<회원가입 관련 리듀서>
import produce from "../util/produce";
export const initialState = {
signUpLoading: false,
signUpDone: false,
signUpError: null,
me: null,
signUpData: {},
loginData: {},
userList: {},
};
export const SIGN_UP_REQUEST = "SIGN_UP_REQUEST";
export const SIGN_UP_SUCCESS = "SIGN_UP_SUCCESS";
export const SIGN_UP_FAILURE = "SIGN_UP_FAILURE";
const dummyUser = (data) => ({
id: data.id,
nickname: "Jin Choi",
Posts: [{ id: 1 }],
Followings: [
{ nickname: "Elle" },
{ nickname: "Mazzie" },
{ nickname: "Lori" },
],
Followers: [
{ nickname: "Coco" },
{ nickname: "Mephis" },
{ nickname: "WillB" },
],
password: data.password,
});
const reducer = (state = initialState, action) =>
produce(state, (draft) => {
switch (action.type) {
case SIGN_UP_REQUEST:
draft.signUpLoading = true;
draft.signUpError = null;
draft.signUpDone = false;
break;
case SIGN_UP_SUCCESS:
draft.signUpLoading = false;
draft.signUpDone = true;
break;
case SIGN_UP_FAILURE:
draft.signUpLoading = false;
draft.signUpError = action.error;
break;
default:
break;
}
});
export default reducer;
<회원가입 관련 사가>
import { all, delay, fork, put, takeLatest, call } from "redux-saga/effects";
import axios from "axios";
import {
SIGN_UP_FAILURE,
SIGN_UP_REQUEST,
SIGN_UP_SUCCESS,
} from "../reducers/user";
function signUpAPI(data) {
return axios.post("https://localhost:3065/user", data);
//only post, put, patch can pass data
}
function* signUp(action) {
try {
const result = yield call(signUpAPI, action.data);
console.log(result);
yield put({
type: SIGN_UP_SUCCESS,
data: action.data,
});
} catch (err) {
console.error(err);
yield put({
type: SIGN_UP_FAILURE,
error: err.response.data,
});
}
}
function* watchSignUp() {
yield takeLatest(SIGN_UP_REQUEST, signUp);
}
export default function* userSaga() {
yield all([
fork(watchSignUp),
]);
}
<백엔드 라우트>
const express = require("express");
const router = express.Router();
const bcrypt = require("bcrypt");
const { User } = require("../models");
router.post("/", async (req, res, next) => {
try {
//email existence check
const exUser = await User.findOne({
where: {
email: req.body.email,
},
});
if (exUser) {
return res.status(403).send("The email is in use");
}
const hashedPassword = await bcrypt.hash(req.body.password, 10);
await User.create({
//inserting data to table asynchronously
email: req.body.email,
nickname: req.body.nickname,
password: hashedPassword,
});
res.status(200).send("ok");
} catch (error) {
console.error(error);
next(error);
}
});
module.exports = router;
조언부탁드립니다. 감사합니다.
답변 1
1
제로초(조현영)
지식공유자
회원가입 dispatch 하는 쪽도 보여주시면 좋을 것 같고요.
watchSignUp, SignUp, SignUpApi 제일 윗줄에 콘솔로그 넣어서 어떤 부분부터 실행이 안 되는지 봐야할 것 같습니다.





말씀하신대로 라인마다 콘솔로그 찍어보니 사가는 제대로 연결된 것을 확인했고, 디스패치가 안되고 있었습니다. Antd의 Form에 onFinish로 넣은 서브밋 액션이 반응을 아예 안하는 것 같아서 리서치해보니 Form.item 쓸때 validation이 민감한 것 같네요. 일단 선생님 코드대로 div로 바꿔주니 정상 작동하게 되었습니다. 빠른 답변 감사합니다. :)