Inflearn Community Q&A

/sagas/user.js

import { all, fork, delay, put, takeLatest } from "redux-saga/effects";
import axios from "axios";
import {
	loginRequestAction,
	loginFailureAction,
	loginSuccessAction,
	logoutFailureAction,
	logoutRequestAction,
	logoutSuccessAction,
} from "../reducers/user";

function loginAPI(data) {
	return axios.post("/api/login", data);
}

function* login(action) {
	try {
		yield delay(1000);
		yield put(loginSuccessAction(action.payload));
	} catch (err) {
		yield put({
			type: loginFailureAction,
			// data: err.response.data,
		});
	}
}

function logoutAPI() {
	return axios.post("/api/logout");
}

function* logout() {
	try {
		// const result = yield call(logoutAPI);
		yield delay(1000);
		yield put({
			type: logoutSuccessAction,
			// data: result.data,
		});
	} catch (err) {
		yield put({
			type: logoutFailureAction,
			data: err.response.data,
		});
	}
}

function* watchLogIn() {
	yield takeLatest(loginRequestAction, login);
}

function* watchLogOut() {
	yield takeLatest(logoutRequestAction, logout);
}

export default function* userSaga() {
	yield all([fork(watchLogIn), fork(watchLogOut)]);
}

/reducers/user.js

import { createSlice, current } from "@reduxjs/toolkit";
import { HYDRATE } from "next-redux-wrapper";

const initialState = {
	isLoggingIn: false, // 로그인 시도중
	isLoggingOut: false, // 로그아웃 시도중
	isLoggedIn: false,
	me: null,
	signUpData: {},
	loginData: {},
};

const userSlice = createSlice({
	name: "user",
	initialState,
	reducers: {
		logIn: (state, action) => {
			state.isLoggedIn = true;
			state.me = action.payload;
		},
		logOut: (state) => {
			state.isLoggedIn = false;
			state.me = null;
		},
		loginRequestAction: (state) => {
			// console.log("reducer loginRequestAction");
			// console.log("state", state);
			state.isLoggingIn = true;
		},
		loginSuccessAction: (state, action) => {
			console.log("reducer login");
			console.log("state", state);
			
			console.log(action);

			state.isLoggingIn = false;
			state.isLoggedIn = true;
			state.me = action.payload;
			state.me.nickname = "zzimzzim";
		},
		loginFailureAction: (state) => {
			state.isLoggingIn = false;
			state.isLoggedIn = false;
		},
		logoutRequestAction: (state) => {
			state.isLoggingOut = true;
		},
		logoutSuccessAction: (state) => {
			state.isLoggingOut = false;
			state.isLoggedIn = false;
			state.me = null;
		},
		logoutFailureAction: (state) => {
			state.isLoggingOut = false;
		},
	},
	extraReducers: (builder) =>
		builder
			.addCase(HYDRATE, (state, action) => ({
				...state,
				...action.payload.user,
			}))
			.addDefaultCase((state) => state),
}); 

export const {
	logIn,
	logOut,
	loginRequestAction,
	loginSuccessAction,
	loginFailureAction,
	logoutRequestAction,
	logoutSuccessAction,
	logoutFailureAction,
} = userSlice.actions; // 액션 생성 함수

export default userSlice.reducer; // 리듀서

로그인할 때

const onFinish = useCallback((data) => {
		dispatch(loginRequestAction({ id: data.userId, password: data.password }));
	}, []);

주 코드는 위와 같습니다!

아.. 이상하네요 어제 몇번이나 시도했었는데

데이터를 못받아오더니 컴터 껐다키고 다른거하다가 다시 테스트해보니까 function* login(action)

{
	try {
		console.log("saga login---------------------------------");
		console.log("action", action);
		// const result = yield call(loginAPI, action.data);
		yield delay(1000);
		yield put({
			type: loginSuccessAction,
			payload: action.payload,
		});
	} catch (err) {
		yield put({
			type: loginFailureAction,
			// data: err.response.data,
		});
	}
}

이렇게 해도 데이터를 잘 받고,

로그인도 잘 됩니다.

귀신이곡할노릇이군요...

제가 무엇을 잘못했을텐데 그걸 몰라 답답한데 그래도 잘 되서 다행입니다. 감사합니다.!

put type에 action함수 자체를 넣어도 되는건 처음보네요. saga put이 지원하는 특수기능일지도 모르겠습니다.