-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
닉네임 변경이 안됩니다..
22.03.15 15:53 작성 조회수 174
0
이렇게 Request 만 가고 실제로 데이터는 바뀌지 않는데요 어디가 문제일까요?
import { Form, Input } from 'antd';
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useInput from '../hooks/useInput';
import { CHANGE_NICKNAME_REQUEST } from '../reducers/user';
const NicknameEditForm = () => {
const { me } = useSelector((state) => state.user);
const [nickname, onChangeNickname] = useInput(me?.nickname || '');
const dispatch = useDispatch();
const onSubmit = useCallback(() => {
dispatch({
type: CHANGE_NICKNAME_REQUEST,
data: nickname,
});
}, [nickname]);
return (
<Form style={{ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px' }}>
<Input.Search
value={nickname}
onChange={onChangeNickname}
addonBefore="닉네임"
enterButton="수정"
onSearch={onSubmit}
/>
</Form>
);
};
export default NicknameEditForm;
답변을 작성해보세요.
0
조현영
지식공유자2022.03.15
예전부터 계속 REQUEST에서 안 된다고 질문 올리시는데 리덕스 세팅 확인해보셔야 합니다. REDUX 연결이 제대로 안 되어있으니까 REQUEST에서 SUCCESS, FAILURE로 넘어가지 않는 겁니다.
Trendy Tube
질문자2022.03.15
-------------------------------------------------------------------------------------------
index.js 입니다.
import { HYDRATE } from 'next-redux-wrapper';
import { combineReducers } from 'redux';
import user from './user';
import post from './post';
// (이전상태, 액션) => 다음상태
const rootReducer = combineReducers({
index: (state = {}, action ) => {
switch(action.type) {
case HYDRATE:
console.log('HYDRATE', action);
return { ...state, ...action.payload };
default:
return state; // Switch 문에 이 부분이 없으면 Error massage : "user" returned undefined during initialization.
}
},
user,
post,
});
export default rootReducer;
-----------------------------------------------------------------------------------------------
post.js 입니다.
import shortId from 'shortid';
import produce from 'immer';
export const initialState = {
mainPosts: [],
imagePaths: [],
hasMorePosts: true,
likePostLoading: false,
likePostDone: false,
likePostError: null,
unlikePostLoading: false,
unlikePostDone: false,
unlikePostError: null,
loadPostsLoading: false,
loadPostsDone: false,
loadPostsError: null,
addPostLoading: false,
addPostDone: false,
addPostError: null,
removePostLoading: false,
removePostDone: false,
removePostError: null,
addCommentLoading: false,
addCommentDone: false,
addCommentError: null,
};
export const LIKE_POST_REQUEST = 'LIKE_POST_REQUEST';
export const LIKE_POST_SUCCESS = 'LIKE_POST_SUCCESS';
export const LIKE_POST_FAILURE = 'LIKE_POST_FAILURE';
export const UNLIKE_POST_REQUEST = 'UNLIKE_POST_REQUEST';
export const UNLIKE_POST_SUCCESS = 'UNLIKE_POST_SUCCESS';
export const UNLIKE_POST_FAILURE = 'UNLIKE_POST_FAILURE';
export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST';
export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS';
export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE';
export const ADD_POST_REQUEST = 'ADD_POST_REQUEST';
export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS';
export const ADD_POST_FAILURE = 'ADD_POST_FAILURE';
export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST';
export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS';
export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE';
export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST';
export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS';
export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE';
export const addPost = (data) => ({ // 동적액션크리에이터
type: ADD_POST_REQUEST,
data,
})
export const addComment = (data) => ({
type: ADD_COMMENT_REQUEST,
data,
})
// 리듀서 : 이전상태를 액션을 통해 다음 상태로 만들어내는 함수( 불변성은 지키면서 )
const reducer = (state = initialState, action) => produce(state, (draft) => {
switch (action.type) {
case LIKE_POST_REQUEST:
draft.likePostLoading = true;
draft.likePostDone = false;
draft.likePostError = null;
break;
case LIKE_POST_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId);
post.Likers.push({ id: action.data.UserId });
draft.likePostLoading = false;
draft.likePostDone = true;
break;
}
case LIKE_POST_FAILURE:
draft.likePostLoading = false;
draft.likePostError = action.error;
break;
case UNLIKE_POST_REQUEST:
draft.unlikePostLoading = true;
draft.unlikePostDone = false;
draft.unlikePostError = null;
break;
case UNLIKE_POST_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId);
post.Likers = post.Likers.filter((v) => v.id !== action.data.UserId);
draft.unlikePostLoading = false;
draft.unlikePostDone = true;
break;
}
case UNLIKE_POST_FAILURE:
draft.unlikePostLoading = false;
draft.unlikePostError = action.error;
break;
case LOAD_POSTS_REQUEST:
draft.loadPostsLoading = true;
draft.loadPostsDone = false;
draft.loadPostsError = null;
break;
case LOAD_POSTS_SUCCESS:
draft.loadPostsLoading = false;
draft.loadPostsDone = true;
draft.mainPosts = action.data.concat(draft.mainPosts);
draft.hasMorePosts = draft.mainPosts.length < 50;
break;
case LOAD_POSTS_FAILURE:
draft.loadPostsLoading = false;
draft.loadPostsError = action.error;
break;
case ADD_POST_REQUEST:
draft.addPostLoading = true;
draft.addPostDone = false;
draft.addPostError = null;
break;
case ADD_POST_SUCCESS:
draft.addPostLoading = false;
draft.addPostDone = true;
draft.mainPosts.unshift(action.data);
break;
case ADD_POST_FAILURE:
draft.addPostLoading = false;
draft.addPostError = action.error;
break;
case REMOVE_POST_REQUEST:
draft.removePostLoading = true;
draft.removePostDone = false;
draft.removePostError = null;
break;
case REMOVE_POST_SUCCESS:
draft.removePostLoading = false;
draft.removePostDone = true;
draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data.PostId);
break;
case REMOVE_POST_FAILURE:
draft.removePostLoading = false;
draft.removePostError = action.error;
break;
case ADD_COMMENT_REQUEST:
draft.addCommentLoading = true;
draft.addCommentDone = false;
draft.addCommentError = null;
break;
case ADD_COMMENT_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId);
post.Comments.unshift(action.data);
draft.addCommentLoading = false;
draft.addCommentDone = true;
break;
// const postIndex = state.mainPosts.findIndex((v) => v.id === action.data.postId);
// const post = { ...state.mainPosts[postIndex] };
// post.Comments = [dummyComment(action.data.content), ...post.Comments];
// const mainPosts = [ ... state.mainPosts];
// mainPosts[postIndex] = post;
// return {
// ...state,
// addCommentLoading: false,
// addCommentDone: true,
// };
}
case ADD_COMMENT_FAILURE:
draft.addCommentLoading = false;
draft.addCommentError = action.error;
break;
default:
break;
}
});
export default reducer;
---------------------------------------------------------------------------------------------
user.js 입니다.
import axios from 'axios';
import produce from 'immer';
export const initialState = {
loadUserLoading: false, // 유저정보 가져오기 시도중
loadUserDone: false,
loadUserError: null,
followLoading: false, // 팔로우 시도중
followDone: false,
followError: null,
unfollowLoading: false, // 언팔로우 시도중
unfollowDone: false,
unfollowError: null,
logInLoading: false, // 로그인 시도중
logInDone: false,
logInError: null,
logOutLoading: false, // 로그아웃 시도중
logOutDone: false,
logOutError: null,
signUpLoading: false, // 가입 시도중
signUpDone: false,
signUpError: null,
changeNicknameLoading: false, // 닉네임 변경 시도중
changeNicknameDone: false,
changeNicknameError: null,
me: null,
signUpData: {},
loginData: {},
}
export const LOAD_USER_REQUEST = 'LOAD_USER_REQUEST';
export const LOAD_USER_SUCCESS = 'LOAD_USER_SUCCESS';
export const LOAD_USER_FAILURE = 'LOAD_USER_FAILURE';
export const REMOVE_FOLLOWER_REQUEST = 'REMOVE_FOLLOWER_REQUEST';
export const REMOVE_FOLLOWER_SUCCESS = 'REMOVE_FOLLOWER_SUCCESS';
export const REMOVE_FOLLOWER_FAILURE = 'REMOVE_FOLLOWER_FAILURE';
export const LOAD_FOLLOWINGS_REQUEST = 'LOAD_FOLLOWINGS_REQUEST';
export const LOAD_FOLLOWINGS_SUCCESS = 'LOAD_FOLLOWINGS_SUCCESS';
export const LOAD_FOLLOWINGS_FAILURE = 'LOAD_FOLLOWINGS_FAILURE';
export const LOAD_FOLLOWERS_REQUEST = 'LOAD_FOLLOWERS_REQUEST';
export const LOAD_FOLLOWERS_SUCCESS = 'LOAD_FOLLOWERS_SUCCESS';
export const LOAD_FOLLOWERS_FAILURE = 'LOAD_FOLLOWERS_FAILURE';
export const LOG_IN_REQUEST = 'LOG_IN_REQUEST';
export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS';
export const LOG_IN_FAILURE = 'LOG_IN_FAILURE';
export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST';
export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS';
export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE';
export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';
export const SIGN_UP_SUCCESS = 'SIGN_UP_SUCCESS';
export const SIGN_UP_FAILURE = 'SIGN_UP_FAILURE';
export const CHANGE_NICKNAME_REQUEST = 'CHANGE_NICKNAME_REQUEST';
export const CHANGE_NICKNAME_SUCCESS = 'CHANGE_NICKNAME_SUCCESS';
export const CHANGE_NICKNAME_FAILURE = 'CHANGE_NICKNAME_FAILURE';
export const FOLLOW_REQUEST = 'FOLLOW_REQUEST';
export const FOLLOW_SUCCESS = 'FOLLOW_SUCCESS';
export const FOLLOW_FAILURE = 'FOLLOW_FAILURE';
export const UNFOLLOW_REQUEST = 'UNFOLLOW_REQUEST';
export const UNFOLLOW_SUCCESS = 'UNFOLLOW_SUCCESS';
export const UNFOLLOW_FAILURE = 'UNFOLLOW_FAILURE';
export const ADD_POST_TO_ME = 'ADD_POST_TO_ME';
export const REMOVE_POST_OF_ME = 'REMOVE_POST_OF_ME';
export const loginAction = (data) => {
return (dispatch, getState) => {
const state = getState();
axios.post('/api/login')
.then(() => {
dispatch(loginSuccessAction(res.data));
})
.catch(() => {
dispatch(loginFailureAction(err));
})
}
}
export const loginRequestAction = (data) => ({
type: LOG_IN_REQUEST,
data,
});
export const logoutRequestAction = () => ({
type: LOG_OUT_REQUEST,
});
const reducer = (state = initialState, action) => produce(state, (draft) => {
switch (action.type) {
case LOAD_USER_REQUEST:
draft.loadUserLoading = true;
draft.loadUserError = null;
draft.loadUserDone = false;
break;
case LOAD_USER_SUCCESS:
draft.loadUserLoading = false;
draft.me = action.data;
draft.loadUserDone = true;
break;
case LOAD_USER_FAILURE:
draft.loadUserLoading = false;
draft.loadUserError = action.error;
break;
case REMOVE_FOLLOWER_REQUEST:
draft.removeFollowerLoading = true;
draft.removeFollowerError = null;
draft.removeFollowerDone = false;
break;
case REMOVE_FOLLOWER_SUCCESS:
draft.removeFollowerLoading = false;
draft.me.Followers = draft.me.Followers.filter((v) => v.id !== action.data.UserId);
draft.removeFollowerDone = true;
break;
case REMOVE_FOLLOWER_FAILURE:
draft.removeFollowerLoading = false;
draft.removeFollowerError = action.error;
break;
case LOAD_FOLLOWINGS_REQUEST:
draft.loadFollowingsLoading = true;
draft.loadFollowingsError = null;
draft.loadFollowingsDone = false;
break;
case LOAD_FOLLOWINGS_SUCCESS:
draft.loadFollowingsLoading = false;
draft.me.Followings = action.data;
draft.loadFollowingsDone = true;
break;
case LOAD_FOLLOWINGS_FAILURE:
draft.loadFollowingsLoading = false;
draft.loadFollowingsError = action.error;
break;
case LOAD_FOLLOWERS_REQUEST:
draft.loadFollowersLoading = true;
draft.loadFollowersError = null;
draft.loadFollowersDone = false;
break;
case LOAD_FOLLOWERS_SUCCESS:
draft.loadFollowersLoading = false;
draft.me.Followers = action.data;
draft.loadFollowersDone = true;
break;
case LOAD_FOLLOWERS_FAILURE:
draft.loadFollowersLoading = false;
draft.loadFollowersError = action.error;
break;
case FOLLOW_REQUEST:
draft.followLoading = true;
draft.followError = null;
draft.followDone = false;
break;
case FOLLOW_SUCCESS:
draft.followLoading = false;
draft.me.Followings.push({ id: action.data.UserId });
draft.followDone = true;
break;
case FOLLOW_FAILURE:
draft.followLoading = false;
draft.followError = action.error;
break;
case UNFOLLOW_REQUEST:
draft.unfollowLoading = true;
draft.unfollowError = null;
draft.unfollowDone = false;
break;
case UNFOLLOW_SUCCESS:
draft.unfollowLoading = false;
draft.me.Followings = draft.me.Followings.filter((v) => v.id !== action.data.UserId);
draft.unfollowDone = true;
break;
case UNFOLLOW_FAILURE:
draft.unfollowLoading = false;
draft.unfollowError = action.error;
break;
case LOG_IN_REQUEST:
draft.logInLoading = true;
draft.logInError = null;
draft.logInDone = false;
break;
case LOG_IN_SUCCESS:
draft.logInLoading = false;
draft.me = action.data;
draft.logInDone = true;
break;
case LOG_IN_FAILURE:
draft.logInLoading = false;
draft.logInError = action.error;
break;
case LOG_OUT_REQUEST:
draft.logOutLoading = true;
draft.logOutError = null;
draft.logOutDone = false;
break;
case LOG_OUT_SUCCESS:
draft.logOutLoading = false;
draft.logOutDone = true;
draft.me = null;
break;
case LOG_OUT_FAILURE:
draft.logOutLoading = false;
draft.logOutError = action.error;
break;
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;
case CHANGE_NICKNAME_REQUEST:
draft.changeNicknameLoading = true;
draft.changeNicknameError = null;
draft.changeNicknameDone = false;
break;
case CHANGE_NICKNAME_SUCCESS:
draft.me.nickname = action.data.nickname;
draft.changeNicknameLoading = false;
draft.changeNicknameDone = true;
break;
case CHANGE_NICKNAME_FAILURE:
draft.changeNicknameLoading = false;
draft.changeNicknameError = action.error;
break;
case ADD_POST_TO_ME:
draft.me.Posts.unshift({ id: action.data });
break;
case REMOVE_POST_OF_ME:
draft.me.Posts = draft.me.Posts.filter((v) = v.id !== action.data);
break;
default:
return state;
};
});
export default reducer;
Trendy Tube
질문자2022.03.15
네 봐주셔서 감사합니다. 올려드립니다.
import { createWrapper } from 'next-redux-wrapper';
import { applyMiddleware, compose, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import reducer from '../reducers'
import rootSaga from '../sagas';
// const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
// console.log(action);
// return next(action);
// };
const configureStore = (context) => {
console.log(context);
const sagaMiddleware = createSagaMiddleware();
const middlewares = [ sagaMiddleware ]; /*loggerMiddleware*/
const enhancer = process.env.NODE_ENV === 'production'
? compose(applyMiddleware(...middlewares)) // 배포용일때 Devtool연결 안해놓고
: composeWithDevTools(
applyMiddleware(...middlewares), // 개발용일때 Devtools 연결, (history가 다 보이면 보안에 취약, 메모리부하)
);
const store = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
const wrapper = createWrapper(configureStore, {
debug: process.env.NODE_ENV === 'development',
});
export default wrapper;
조현영
지식공유자2022.03.15
여기까지는 문제가 없네요. 백엔드 서버는 켜두셨다고 하니까 saga 문제입니다. user saga쪽 코드 올려주시고, 개발자 도구 네트워크 탭 켠 상태로 다시 닉네임변경 버튼 클릭해보세요. 네트워크탭에 아무런 요청이 기록되지 않으면 사가에서 요청을 안 보내고 있는 겁니다.
Trendy Tube
질문자2022.03.16
네 말씀해주신대로 개발자 도구 네트워크 탭 켠 상태로 다시 닉네임변경 버튼 클릭했을때 네트워크탭에 아무런 요청이 기록되지 않네요, 사가에서 요청을 안보내고 있는거 같습니다. user saga쪽 네트워크 올립니다. 확인해주세요~
https://github.com/laney522/avocode_v2/tree/main/prepare
import { all, fork, delay, put, takeLatest, call } from 'redux-saga/effects';
import axios from 'axios';
import { LOG_IN_REQUEST,
LOG_IN_SUCCESS,
LOG_IN_FAILURE,
LOG_OUT_REQUEST,
LOG_OUT_SUCCESS,
LOG_OUT_FAILURE,
SIGN_UP_REQUEST,
SIGN_UP_SUCCESS,
SIGN_UP_FAILURE,
FOLLOW_REQUEST,
UNFOLLOW_REQUEST,
FOLLOW_SUCCESS,
FOLLOW_FAILURE,
UNFOLLOW_SUCCESS,
UNFOLLOW_FAILURE,
CHANGE_NICKNAME_REQUEST,
CHANGE_NICKNAME_SUCCESS,
CHANGE_NICKNAME_FAILURE,
LOAD_FOLLOWERS_REQUEST,
LOAD_FOLLOWERS_SUCCESS,
LOAD_FOLLOWERS_FAILURE,
LOAD_FOLLOWINGS_REQUEST,
LOAD_FOLLOWINGS_SUCCESS,
LOAD_FOLLOWINGS_FAILURE,
REMOVE_FOLLOWER_REQUEST,
REMOVE_FOLLOWER_SUCCESS,
REMOVE_FOLLOWER_FAILURE,
} from '../reducers/user';
function removeFollowerAPI(data) {
return axios.delete(`/user/follower/${data}`);
}
function* removeFollower(action) {
try{
const result = yield call (removeFollowerAPI, action.data);
yield put({
type: REMOVE_FOLLOWER_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: REMOVE_FOLLOWER_FAILURE,
error: err.response.data,
})
}
}
function loadFollowersAPI(data) {
return axios.get('/user/followers', data);
}
function* loadFollowers(action) {
try{
const result = yield call (loadFollowersAPI, action.data);
yield put({
type: LOAD_FOLLOWERS_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: LOAD_FOLLOWERS_FAILURE,
error: err.response.data,
})
}
}
function loadFollowingsAPI(data) {
return axios.get('/user/followings', data);
}
function* loadFollowings(action) {
try{
const result = yield call (loadFollowingsAPI, action.data);
yield put({
type: LOAD_FOLLOWINGS_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: LOAD_FOLLOWINGS_FAILURE,
error: err.response.data,
})
}
}
function changeNicknameAPI(data) {
return axios.patch('/user/nickname', { nickname: data });
}
function* changeNickname(action) {
try{
const result = yield call (changeNicknameAPI, action.data);
yield put({
type: CHANGE_NICKNAME_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: CHANGE_NICKNAME_FAILURE,
error: err.response.data,
})
}
}
function loadUserAPI() {
return axios.get('/user');
}
function* loadUser(action) {
try{
console.log('saga logIn');
const result = yield call(loadUserAPI, action.data);
yield put({
type: LOAD_USER_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: LOAD_USER_FAILURE,
error: err.response.data,
})
}
}
function logInAPI(data) {
return axios.post('/user/login', data)
}
function* logIn(action) {
try{
console.log('saga logIn');
const result = yield call(logInAPI, action.data);
yield put({
type: LOG_IN_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: LOG_IN_FAILURE,
error: err.response.data,
})
}
}
function logOutAPI() {
return axios.post('/logout');
}
function* logOut() {
try{
yield call(logOutAPI);
yield put({
type: LOG_OUT_SUCCESS,
});
} catch (err) {
yield put({
type: LOG_OUT_FAILURE,
error: err.response.data,
})
}
}
function signUpAPI(data) {
return axios.post('/user', data);
}
function* signUp(action) {
try{
const result = yield call(signUpAPI, action.data);
console.log(result);
yield put({
type: SIGN_UP_SUCCESS,
});
} catch (err) {
yield put({
type: SIGN_UP_FAILURE,
error: err.response.data,
})
}
}
function followAPI(data) {
return axios.patch(`/user/${data}/follow`)
}
function* follow(action) {
try{
const result = yield call(followAPI, action.data);
yield put({
type: FOLLOW_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: FOLLOW_FAILURE,
error: err.response.data,
})
}
}
function unfollowAPI() {
return axios.delete(`/user/${data}/unfollow`);
}
function* unfollow(action) {
try{
const result = yield call(unfollowAPI, action.data);
yield put({
type: UNFOLLOW_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: UNFOLLOW_FAILURE,
error: err.response.data,
})
}
}
function* watchRemoveFollower() {
yield takeLatest(REMOVE_FOLLOWER_REQUEST, removeFollower);
}
function* watchLoadFollowers() {
yield takeLatest(LOAD_FOLLOWERS_REQUEST, loadFollowers);
}
function* watchLoadFollowings() {
yield takeLatest(LOAD_FOLLOWINGS_REQUEST, loadFollowings);
}
function* watchChangeNickname() {
yield takeLatest(CHANGE_NICKNAME_REQUEST, changeNickname);
}
function* watchLoadUser() {
yield takeLatest(LOAD_USER_REQUEST, loadUser);
}
function* watchFollow() {
yield takeLatest(FOLLOW_REQUEST, follow);
}
function* watchUnfollow() {
yield takeLatest(UNFOLLOW_REQUEST, unfollow);
}
function* watchLogIn() {
yield takeLatest(LOG_IN_REQUEST, logIn);
}
function* watchLogOut() {
yield takeLatest(LOG_OUT_REQUEST, logOut);
}
function* watchSignUp() {
yield takeLatest(SIGN_UP_REQUEST, signUp);
}
export default function* userSaga() {
yield all([
fork(watchRemoveFollower),
fork(watchLoadFollowers),
fork(watchLoadFollowings),
fork(watchChangeNickname),
fork(watchLoadUser),
fork(watchFollow),
fork(watchUnfollow),
fork(watchLogIn),
fork(watchLogOut),
fork(watchSignUp),
])
}
조현영
지식공유자2022.03.16
LOAD_USER_REQUEST랑 LOAD_USER_SUCCESS, LOAD_USER_FAILURE import 빠뜨리셨습니다.
그리고 로그아웃도 /user/logout입니다.
저런 import 빠뜨린 것 eslint가 잡아주어야 하는데 eslint 7버전 설치하시고 에디터에 연결해두세요.
npm i -D eslint@7
Trendy Tube
질문자2022.03.16
빠른 답변주셔서 감사합니다. 위에 언급해주신데로 다 했구요, eslint 7버전도 설치 했습니다.
그후 프론트/벡앤드 서버 실행하니 로그인/로그아웃 정상으로 되고, 닉네임도 변경됩니다, 감사합니다!!
에디터에 연결해두라는 말씀은 잘 이해하지 못했습니다. 궁금한 점은 /logout 앞에 /user 를 넣어 주었던 이유가 무엇이엇나요?
그리고 현재 게시글도 ADD_POST_REQUEST, ADD_POST_FAILURE 액션만 나오고 게시글 작성이 안되는데
네트워크를 보니 500 Internel server error 라고 나옵니다. 이러면 routes> post.js 쪽 오류인지요?
--------------------------------------------------------------------------------
back>routes>post.js ...게시글 작성이 안됩니다..
const express = require('express');
const { Post, Image, Comment, User } = require('../models');
const { isLoggedIn } = require('./middlewares');
const router = express.Router();
router.post('/', isLoggedIn, async (req, res, next) => {
try {
const post = await Post.create({
content: req.body.content,
UserId: req.user.id,
});
const fullPost = await Post.findOne({
where: { id: post.id },
include: [{
model: Image,
}, {
model: Comment,
include: [{
model: User, // 댓글 작성자
attributes: ['id', 'nickname'],
}],
}, {
model: User, // 게시글 작성자
attributes: ['id', 'nickname'],
}, {
model: User, // 좋아요 누른 사람
as: 'Likers',
attributes: ['id'],
}]
})
res.status(201).json(fullPost);
} catch(error) {
console.error(error);
next(error);
}
});
router.post('/:postId/comment', isLoggedIn, async (req, res, next) => { // POST / post/1/comment
try {
const post = await Post.findOne({
where: { id: req.params.postId }
});
if (!post) {
return res.status(403).send('존재하지 않는 게시글입니다.');
}
const comment = await Comment.create({
content: req.body.content,
PostId: parseInt(req.params.postId, 10), // reducer > post.js > ADD_COMMENT_SUCCESS -> action.data.PostId 대소문자 일치시켜주어야 한다!
UserId: req.user.id,
})
// const fullComment = await Comment.findOne({
// where: { id: comment.id },
// include: [{
// model: User,
// attributes: ['id', 'nickname'],
// }],
// })
res.status(201).json(comment);
} catch(error) {
console.error(error);
next(error);
}
});
router.patch('/:postId/like', isLoggedIn, async (req, res, next) => { // PATCH /post/1/like
try {
const post = await Post.findOne({ where: { id: req.params.postId }});
if (!post) {
return res.status(403).send('게시글이 존재하지 않습니다.');
}
await post.addLikers(req.user.id);
res.json({ PostId: post.id, UserId: req.user.id});
} catch (error) {
console.error(error);
next(error);
}
});
router.delete('/:postId/like', isLoggedIn, async (req, res, next) => { // DELETE /post/1/like
try {
const post = await Post.findOne({ where: { id: req.params.postId }});
if (!post) {
return res.status(403).send('게시글이 존재하지 않습니다.');
}
await post.removeLikers(req.user.id);
res.json({ PostId: post.id, UserId: req.user.id});
} catch (error) {
console.error(error);
next(error);
}
});
router.delete('/:postId', isLoggedIn, async (req, res) => { // DELETE /post/10
try {
await Post.destroy({
where: {
id: req.params.postId,
UserId: req.user.id,
},
});
res.status(200).json({ PostId: parseInt(req.params.postId, 10) });
} catch(error) {
console.error(error);
next(error);
}
});
module.exports = router;
-------------------------------------------------------------------------------------
front>sagas>post.js 도 첨부합니다.
import axios from 'axios';
import { put, takeLatest, all, fork, throttle, call } from 'redux-saga/effects';
import {
ADD_COMMENT_FAILURE,
ADD_COMMENT_REQUEST,
ADD_COMMENT_SUCCESS,
ADD_POST_REQUEST,
ADD_POST_SUCCESS,
ADD_POST_FAILURE,
REMOVE_POST_REQUEST,
REMOVE_POST_SUCCESS,
REMOVE_POST_FAILURE,
LOAD_POSTS_REQUEST,
LOAD_POSTS_SUCCESS,
LOAD_POSTS_FAILURE,
LIKE_POST_REQUEST,
LIKE_POST_SUCCESS,
LIKE_POST_FAILURE,
UNLIKE_POST_REQUEST,
UNLIKE_POST_SUCCESS,
UNLIKE_POST_FAILURE,
} from '../reducers/post';
import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user';
function likePostAPI(data) {
return axios.patch(`/post/${data}/like`);
}
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data);
yield put({
type: LIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: LIKE_POST_FAILURE,
data: err.response.data,
});
}
}
function unlikePostAPI(data) {
return axios.delete(`/post/${data}/like`);
}
function* unlikePost(action) {
try {
const result = yield call(unlikePostAPI, action.data);
yield put({
type: UNLIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: UNLIKE_POST_FAILURE,
data: err.response.data,
});
}
}
function loadPostsAPI(data) {
return axios.get('/post', data);
}
function* loadPosts(action) {
try {
const result = yield call(loadPostsAPI, action.data);
yield put({
type: LOAD_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_POSTS_FAILURE,
data: err.response.data,
});
}
}
function addPostAPI(data) {
return axios.post('/post', { content: data });// 이렇게 해주어야 프론트엔드, 백엔드 서버에서 서로간 쿠키가 전달된다.
}
function* addPost(action) {
try {
const result = yield call(addPostAPI, action.data);
yield put({
type: ADD_POST_SUCCESS,
data: result.data,
});
yield put({
type: ADD_POST_TO_ME,
data: result.data.id,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_POST_FAILURE,
data: err.response.data,
});
}
}
function removePostAPI(data) {
return axios.delete(`/post/${data}`);
}
function* removePost(action) {
try {
const result = yield call(removePostAPI, action.data);
yield put({
type: REMOVE_POST_SUCCESS,
data: result.data,
});
yield put({
type: REMOVE_POST_OF_ME,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: REMOVE_POST_FAILURE,
data: err.response.data,
});
}
}
function addCommentAPI(data) {
return axios.post(`/post/${data.postId}/comment`, data); // POST /post/1/comment
}
function* addComment(action) {
try {
const result = yield call(addCommentAPI, action.data);
yield put({
type: ADD_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_COMMENT_FAILURE,
data: err.response.data,
});
}
}
function* watchLikePost() {
yield takeLatest(LIKE_POST_REQUEST, likePost);
}
function* watchUnlikePost() {
yield takeLatest(UNLIKE_POST_REQUEST, unlikePost);
}
function* watchLoadPosts() {
yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts);
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPost);
}
function* watchRemovePost() {
yield takeLatest(REMOVE_POST_REQUEST, removePost);
}
function* watchAddComment() {
yield takeLatest(ADD_COMMENT_REQUEST, addComment);
}
export default function* postSaga() {
yield all([
fork(watchLikePost),
fork(watchUnlikePost),
fork(watchAddPost),
fork(watchLoadPosts),
fork(watchRemovePost),
fork(watchAddComment),
]);
}
조현영
지식공유자2022.03.16
eslint는 단순히 설치만 한다고 되는 게 아니라 에디터에서 eslint 플러그인으로 해야 합니다.
logout은 백엔드 주소가 /user/logout으로 정해져있으니 그렇게 하셔야 하는 거고요.
500 Internel server error면 서버 에러입니다. 서버 콘솔 확인하세요.
Trendy Tube
질문자2022.03.16
PostForm.js 에 코드는 이렇습니다. 글자를 입력해도 다시 입력하라고 에러메시지가 나오기도 하네요
const onSubmit = useCallback(() => {
if (!text || !text.trim()) {
return alert('게시글을 작성하세요.');
};
const formData = new FormData();
imagePaths.forEach((p) => {
formData.append('image', p);
});
formData.append('content', text);
dispatch({
type: ADD_POST_REQUEST,
data: formData,
});
}, [text, imagePaths]);
Trendy Tube
질문자2022.03.17
Input에 onChange가 있는데요 왜 안될까요?
import React, { useCallback, useEffect, useRef } from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { UPLOAD_IMAGES_REQUEST, REMOVE_IMAGE, ADD_POST_REQUEST } from '../reducers/post';
import useInput from '../hooks/useInput';
const PostForm = () => {
const { imagePaths, addPostDone } = useSelector((state) => state.post);
const dispatch = useDispatch();
const { text, onChangeText, setText } = useInput(''); // 커스텀 훅 만들어놓은거 자주 활용하기!
useEffect(() => {
if (addPostDone) {
setText('');
}
}, [addPostDone]);
const onSubmit = useCallback(() => {
if (!text || !text.trim()) {
return alert('게시글을 작성하세요.');
};
const formData = new FormData();
imagePaths.forEach((p) => {
formData.append('image', p);
});
formData.append('content', text);
dispatch({
type: ADD_POST_REQUEST,
data: formData,
});
}, [text, imagePaths]);
const imageInput = useRef();
const onClickImageUpload = useCallback(() => {
imageInput.current?.click?.();
}, [imageInput.current]);
const onChangeImages = useCallback((e) => {
console.log('images', e.target.files);
const imageFormData = new FormData();
[].forEach.call(e.target.files, (f) => {
imageFormData.append('image', f);
});
dispatch({
type: UPLOAD_IMAGES_REQUEST,
data: imageFormData,
});
});
const onRemoveImage = useCallback((index) => () => {
dispatch({
type: REMOVE_IMAGE,
data: index,
});
});
return (
<Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>
<Input.TextArea
value={text}
onChange={onChangeText}
maxLength={140}
placeholder="What happen?"
/>
<div>
<Input type="file" name="image" multiple hidden ref={imageInput} onChange={onChangeImages} />
<Button onClick={onClickImageUpload}>이미지 업로드</Button>
<Button type="primary" style={{ float: 'right' }} htmlType="submit">Add Story</Button>
</div>
<div>
{imagePaths.map((v, i) => (
<div key={v} style={{ display: 'inline-block' }}>
<img src={`http://localhost:3065/${v}`} style={{ width: '200px' }} alt={v} />
<div>
<Button onClick={onRemoveImage(i)}>제거</Button>
</div>
</div>
))}
</div>
</Form>
);
};
export default PostForm;
답변 1