TIL Redux-saga

리덕스 사가를 쓰는 이유는 비동기 일경우, 또 많은 기능을 관리할때 사용하고,generator function을 기반으로 작동된다.

제너레이터 함수

제너레이터 함수는 자바스크립트의 문법중 하나로 함수를 정지 했다가 필요한 시점에 진행할수 있는 특징을 가지고 있다. (yield, next메서드로 실행 일시 중지)

function에 *를 붙여서 생성한다.

위 특징을 적용시켜서 리덕스으 흐름을 관리하는게 리덕스 사가이다.

리액트 사가

먼저 yarn add redux-saga 로 설치를 한다.
그리고 store에 import createSgaMiddleWare를 가져온뒤, middelwares에
sagaMiddleware를 넣는다.

그리고 하단에 sgaMiddleware.run()을하고 안에 사가 함수를 넣으면 된다.

그리고 내가 만들고 싶은 항목별로 saga를 입력한다.
먼저 하단의, onSignOutSuccess 제너레이터처럼, 함수명을 입력하고
yield 에 takeLastest 메서드를 넣고 액션, 함수를 입력한다 (clearCartOnSignOut)
그리고 그 상단에 clearCartOnSignOut 함수를 작성하는 방식으로 작성하면된다

[cart.sags.js ]

export function* clearCartOnSignOut() {
  yield put(clearCart());
}

export function* onSignOutSuccess() {
  yield takeLatest(UserActionTypes.SIGN_OUT_SUCCESS, clearCartOnSignOut);
}

//이 부분은 cart.saga.js의 모든 함수를 묶는 부분
// 나중에 root-saga로 내보내지고, 거기서 store로 연결된다. 

export function* cartSagas() {  
  yield all([call(onSignOutSuccess)]);
}

맨마지막 함수에서 보내야할 사가함수가 많을경우 이렇게 묶어버린다 (멈추지 않도록 하기위해서)
여기서 call(넣을 함수, 함수에들어갈 인자) 로 보통 구성된다.

yield all([call(onSignOutSuccess)],[call(onSignOutSuccess2)],....);

리덕스 사가 메서드

take, takeEvery, takeLatest 메서드 차이점

take(액션, 함수) 는 한번 하면 다시 실행되지 않는 1회성이고,
takeEvery(액션,함수)는 looping으로 계속 반복되는 방식이다.
즉 액션이 디스패치 되고나서, 함수가 실행되고, 또다시 함수가 실행되는 식이다.

takelast(액션, 함수) 는 최종에만 반응하도록 하는 방식이다.
액션이 스토어에 디스패치 된 이후, 함수가 실행되는데 끝나지 않은데 함수가 호출되면 그전 작업을 취소해 버려서 최종에 호출된 함수만 1회 호출되는 방식이다.

전체적인 흐름

컴포넌트에 리덕스로, action을 연결후 액션의 리턴값을 , useState 등의 훅으로 뷰를 관리 하는 방식.

dispatch로 보내지면 거기서 store로 해서 saga로 연결된다. saga 부분을 보면 먼저 onSignUp으로 signUpStart로 액션.타입일때, signup 함수를 호출,
83번째 줄, signup에서 payload로 받아온 변수를 디스트럭쳐링 할당하고, 이걸 firebase로 보내서 회원 여부를 판단한뒤 성공 했을경우
액션의 signUpSuccess 함수를, 실패시 singUpFailure 함수를 호출한다.

그리고, 회원가입후 자동으로 로그인되도록, onSignUpSuccess()를 만들고, signInAfterSingUp 함수를 만들어 로그인 후 firebase에서 데이터를 가져오도록 한다.

다이어그램

사가를 몇번 사용하다보니 패턴에 익숙해지면서 편해지는거같다.

위 글은 제가 udemy에서 공부한 내용과 리덕스 사가 메소드 사이트를 바탕으로 작성된 글입니다.
공부 하면서 적은거라 미흡한점이 있을수 있습니다 ㅠ
리덕스사가 메소드