redux-saga api 호출 redux-saga는 제너레이터 함수를 통해 yield로 api 호출 가능 이벤트 리스너 같이 호출시마다 실행하도록 할 수 있음 👇 1️⃣ while(true){...} 동기적으로 동작 function* watchLogOut() { while(true) { yield take('LOG_OUT_REQUEST', logOut); } } 직관적이지 않고, 코드상으로도 좋지 않아서 잘 안쓰임 2️⃣ takeEvery, takeLatest, takeLeading 비동기로 동작(while문 대체 가능) function* watchLogOut() { yield takeEvery('LOG_OUT_REQUEST', logOut); } takeEvery, takeLatest, takeLea..

call call은 동기 함수 호출(blocking) call을 하면 로그인 api가 return할 때까지 기다려서 result에 값을 넣어줌 call의 경우 👇 function* logIn() { try{ const result = yield call(logInAPI); axios.post('/api/login') .then((result) => { yield put({ type: 'LOG_IN_SUCCESS', data: result.data, }); }) } catch (err) { yield put({ type: 'LOG_IN_FAILURE', data: err.response.data, }); } } fork fork는 비동기 함수 호출(non blocking) fork를 하면 비동기이기 때문에..

Redux-thunk와 Redux-saga Redux-thunk와 Redux-saga는 둘 다 Redux의 미들웨어 라이브러리임 Redux 미들웨어는 dispatch()메소드를 통해 store로 가는 액션을 가로채는 코드 Redux-Thunk 표준 액션들을 디스패치하는 것 외에도 Redux-Thunk 미들웨어를 사용하면 thunks라고 불리는 특별한 함수를 디스패치할 수 있음 Thunks(in Redux)는 일반적으로 다음 구조를 가짐 👇 export const thunkName = parameters => (dispatch, getState) => { // 당신의 어플리케이션 로직을 여기에 적으세요 }; thunk는 (선택적으로) 일부 parameters를 인수로 취하고 또 다른 함수를 return하는..