Written on
·
233
0
```sagas/user.ts
import axios from "axios";
import { all, delay, fork, put, takeLatest } from "redux-saga/effects";
import {
LOG_IN_FAILURE,
LOG_IN_REQUEST,
LOG_IN_SUCCESS,
LOG_OUT_FAILURE,
LOG_OUT_REQUEST,
LOG_OUT_SUCCESS,
SIGN_UP_FAILURE,
SIGN_UP_REQUEST,
SIGN_UP_SUCCESS,
} from "../reducers/user";
function loginAPI(data: any) {
return axios.post("/api/login", data);
}
function* logIn(action: any) {
try {
yield delay(1000);
yield put({
type: LOG_IN_SUCCESS,
data: action.data,
});
} catch (error: any) {
yield put({
type: LOG_IN_FAILURE,
error: error.response.data,
});
}
}
function logoutAPI() {
return axios.post("/api/login");
}
function* logOut() {
try {
yield delay(1000);
yield put({
type: LOG_OUT_SUCCESS,
});
} catch (error: any) {
yield put({
type: LOG_OUT_FAILURE,
error: error.response.data,
});
}
}
function signUpAPI() {
return axios.post("/api/signUp");
}
function* signUp() {
try {
yield delay(1000);
yield put({
type: SIGN_UP_SUCCESS,
});
} catch (error: any) {
yield put({
type: SIGN_UP_FAILURE,
error: error.response.data,
});
}
}
function* watchLogin() {
console.log("사가로그인 리스너 ");
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(watchLogin), fork(watchLogOut), fork(watchSignUp)]);
}
```
```sagas/index.ts
import { all, fork } from "redux-saga/effects";
import postSaga from "./post";
import userSaga from "./user";
export default function* rootSaga() {
yield all([fork(postSaga), fork(userSaga)]);
}
```
```reducers/user.ts
export const initialState = {
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 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";
const dummyUser = (data: any) => ({
...data,
nickname: "GIYEON",
id: 1,
Posts: [],
Followings: [],
Followers: [],
});
//action
export const loginRequestAction = (data: any) => {
return {
type: LOG_IN_REQUEST,
data,
};
};
export const logoutRequestAction = () => {
return {
type: LOG_OUT_REQUEST,
};
};
const reducer = (state: any = initialState, action: any) => {
switch (action.type) {
case LOG_IN_REQUEST:
return {
...state,
logInLoading: true,
logInError: null,
logInDone: false,
};
case LOG_IN_SUCCESS:
return {
...state,
logInLoading: false,
logInDone: true,
me: dummyUser(action.data),
};
case LOG_IN_FAILURE:
return {
...state,
logInLoading: false,
logInError: action.error,
};
case LOG_OUT_REQUEST:
return {
...state,
logOutLoading: true,
logOutDone: false,
logOutError: null,
};
case LOG_OUT_SUCCESS:
return {
...state,
logOutLoading: false,
logOutDone: true,
me: null,
};
case LOG_OUT_FAILURE:
return {
...state,
logOutLoading: false,
logOutError: action.error,
};
case SIGN_UP_REQUEST:
return {
...state,
signUpLoading: true,
signUpDone: false,
signUpError: null,
};
case SIGN_UP_SUCCESS:
return {
...state,
signUpLoading: false,
signUpDone: true,
};
case SIGN_UP_FAILURE:
return {
...state,
signUpLoading: false,
signUpError: action.error,
};
case CHANGE_NICKNAME_REQUEST:
return {
...state,
changeNicknameLoading: true,
changeNicknameDone: false,
changeNicknameError: null,
};
case CHANGE_NICKNAME_SUCCESS:
return {
...state,
changeNicknameLoading: false,
changeNicknameDone: true,
};
case CHANGE_NICKNAME_FAILURE:
return {
...state,
changeNicknameLoading: false,
changeNicknameError: action.error,
};
default:
return state;
}
};
export default reducer;
```
logInLoading true까지 되고
로그인 무한 로딩이 걸립니다.
뭐가 문제일까요 ..
Answer 1
0
const reducer = (state: any = initialState, action: any) => {
switch (action.type) {
case LOG_IN_REQUEST: {
console.log("reducer LOG_IN_REQUEST");
return {
...state,
logInLoading: true,
logInError: null,
logInDone: false,
};
}
위 코드 reducer switch 문까지는 제대로 떠요..!
function* watchLogin() { console.log(“사가로그인 리스너 “); yield takeLatest(LOG_IN_REQUEST, logIn); }
로그인 버튼 클릭 시 위의 사가로그인 리스너 로그가 안뜨는 것 같아요.
Redux 사가 연결이 제대로 안된 것 같은데 도무지 모르겠습니다 ..
연결부 코드는 아래와 같아요 ..!
// sagas/index
export default function* userSaga() {
yield all([fork(watchLogin), fork(watchLogOut), fork(watchSignUp)]);
}
//sagas/user
export default function* rootSaga() {
yield all([fork(postSaga), fork(userSaga)]);
}
//store/configureStore
import { createWrapper } from “next-redux-wrapper”;
import { createStore, applyMiddleware, compose } from “redux”;
import reducer from “../reducers”;
import rootSaga from “../sagas”;
import { composeWithDevTools } from “redux-devtools-extension”;
import createSagaMiddleware from “redux-saga”;
const configureStore = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares: any = [sagaMiddleware];
const enhancer =
process.env.NODE_ENV === “production”
? compose(applyMiddleware(…middlewares))
: composeWithDevTools(applyMiddleware(…middlewares));
const store: any = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
const wrapper = createWrapper(configureStore, {
debug: process.env.NODE_ENV === “development”,
});
export default wrapper;
rootSaga랑 userSaga에도 콘솔로그 하나씩 넣어보세요. 어디서부터 안 되는지 파악이 중요합니다. 코드는 문제가 없어 보이는데 못 찾은 오타가 있을 수 있습니다. 오타 찾는 게 워낙 힘든 일이어서요.
아직 백엔드 (노드) 부분 연결을 안하고 더미로 진행하고 있습니다
코드상에서는 문제가 없는 게 맞죠 ..?