구현 사항
- TypeScript 사용한 TodoList 구현
- server API 이용하여 할 일 목록 관리
- Redux, Redux-Saga 사용
Points
- Redux Saga
Things I learned
Redux-Saga 기본 개념
리덕스 사가는 리덕스에서 비동기 처리를 가능하게 하는 middleware이다. 리덕스에서는 action을 dispatch하면 state가 바로 변경되어 비동기 처리가 불가능하기 때문에 사가를 사용한다. action 발생 후 reducer가 액션을 받아 state를 변경하기 전에 필요한 작업을 수행한다. 리덕스 사가는 비동기 작업 처리를 위해 'Generators'를 사용한다.
-
Generator
generator function은 실행을 멈췄다가 다시 진행할 수 있다는 특징이 있다. generator function은 iterator object를 리턴하고, 이 object에 대해 next() method를 호출하면 다음 yield keyword가 나올 때까지 function body가 실행된다.
next() method는 yield에 의해 return된 값인 value property, 그리고 generator function 실행이 모두 완료되었는지를 나타내는 done(boolean) property를 포함한 객체를 반환한다.
..이쯤되면 정신이 다소 혼미해지지만 🤔 예시 코드를 보면 이해 가능! 🤗
-
사가를 이용한 api 호출 예시
사가는 (일종의 백그라운드 쓰레드처럼) 특정 액션이 디스패치되는지 여부를 watch하여 api 호출 등의 부수 효과를 일으키고, 결과에 따른 새로운 액션을 발생시킨다. (아래 예시에서 yield fetch -> yield put)
-
helper functions
- takeEvery : 여러 개의 태스크 인스턴스를 동시에 시작
- takeLatest : 이전 태스크가 실행중이라면 취소하고 마지막 태스크만 실행
- call : 첫번째 파라미터는 함수, 나머지 파라미터는 함수에 넣을 파라미터를 받아서 실행
- all : 제너레이터 함수들을 배열 형태로 파라미터로 넣어주면 병행적으로 동시에 실행되고 전부 resolve될 때까지 기다린다.
yield(saga1())
yield(saga2())-> saga1()이 resolve된 후 saga2() 실행
yield all([saga1(), saga2[]])-> saga1, saga2 동시 실행
Redux-Saga의 장점
왜 사가가 Thunk보다 비동기 로직을 테스트하기가 더 쉬운가?
- 액션 크리에이터와 비동기 로직이 분리되어 있다. call과 put method가 순수한 JS 객체를 반환하므로 equality comparison으로 테스트하기 쉽다.
