user.js
4.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
import {all, call, fork, delay, put, takeEvery, takeLatest} from 'redux-saga/effects';
import axios from 'axios';
import host from '../env';
import {
LOG_IN_FAILURE,
LOG_IN_REQUEST,
LOG_IN_SUCCESS,
SIGN_UP_FAILURE,
SIGN_UP_REQUEST,
SIGN_UP_SUCCESS,
LOAD_ME_REQUEST,
LOAD_ME_SUCCESS,
LOAD_ME_FAILURE,
LOG_OUT_REQUEST,
LOG_OUT_SUCCESS,
LOG_OUT_FAILURE,
} from '../reducers/user';
import {AsyncStorage} from 'react-native';
const parseCookies = (cookies = '') =>
cookies
.split(';')
.map(v =>
v.split('=')
)
.reduce((acc, [key, value]) => {
acc[key.trim()] = decodeURIComponent(value);
console.log(acc);
return acc;
}, {});
//로그인
function loginAPI(data) {
const {email, password} = data;
console.log(email, password);
console.log(`http://${host}:4001/user/login`);
return axios.post(`http://${host}:4001/user/login`, {
email, password
}, {
withCredentials: true
});
}
// # 함수의 동기적인 호출을 할 때 사용
// 응답이 다 받아진 후에 실행할 때 사용
function* login(action) {
try {
console.log('login하러 왔어요');
const res = yield call(loginAPI, action.data);
console.log('서버 login에서 온 응답', res);
const {user} = res.data;
const cookieArray = res.headers['set-cookie'];
console.log(cookieArray);
yield call(AsyncStorage.setItem, 'cookie', `userChecker=s%3A${cookieArray.map(cookie => parseCookies(cookie)['userChecker'].substring(2))}`);
yield put({
type: LOG_IN_SUCCESS,
data: {
me: user
}
})
} catch (e) {
console.error(e);
yield put({
type: LOG_IN_FAILURE,
data: {
info: e.response.data.info
}
})
}
};
function* watchLogin() {
yield takeLatest(LOG_IN_REQUEST, login);
}
// 회원가입
function signUpAPI(data) {
const {email, nickName, password} = data;
return axios.post(`http://${host}:4001/user/signUp`, {
email, nickName, password
}, {
withCredentials: true
});
}
function* signUp(action) {
try {
console.log('signUp 실행원할');
const res = yield call(signUpAPI, action.data);
const {me} = res.data;
yield put({
type: SIGN_UP_SUCCESS,
data: {
me
}
});
} catch (e) {
console.error(e);
yield put({
type: SIGN_UP_FAILURE,
data: {
info: e.response.data.info
}
});
}
}
// # generator 함수에서 마지막 액션 하나만 유효하다고 인정
// 실수로 회원가입 버튼을 연달아 누를 경우 서버의 요청이 2번 가지 않게함
function* watchSignUp() {
yield takeLatest(SIGN_UP_REQUEST, signUp);
}
function loadMeAPI() {
return axios.get(`http://${host}:4001/user/loadMe`, {withCredentials: true})
};
function* loadMe(action) {
try {
console.log('loadMe 실행원할');
const res = yield call(loadMeAPI, action.data);
const {user} = res.data;
yield put({
type: LOAD_ME_SUCCESS,
data: {
user
}
})
} catch (e) {
console.error(e);
yield put({
type: LOAD_ME_FAILURE,
data: {
info: e.response.data.info
}
})
}
};
function* watchLoadMe() {
yield takeLatest(LOAD_ME_REQUEST, loadMe);
}
function logoutAPI() {
return axios.get(`http://${host}:4001/user/logout`, {withCredentials: true});
}
function* logout() {
try {
const res = yield call(logoutAPI);
console.log('logout 완료');
yield call(AsyncStorage.removeItem, 'cookie');
yield put({
type: LOG_OUT_SUCCESS
});
} catch (e) {
console.error(e);
yield put({
type: LOG_OUT_FAILURE,
data: {
info: e.response.data.info
}
})
}
}
function* watchLogoutMe() {
yield takeLatest(LOG_OUT_REQUEST, logout);
}
// # 모든 액션을 유효하게 인정한다.
// while(true)로 감싸는 효과
// takeEvery
// # 함수의 비동기적인 호출을 사용할 때
// call과 다르게 fork는 순서 상관없이 실행할 때 사용
export default function* userSaga() {
yield all([
fork(watchLogin),
fork(watchSignUp),
fork(watchLoadMe),
fork(watchLogoutMe),
]);
}