본문 바로가기

Web/Redux

[Redux] redux-saga

- reducer를 분할하였으면 saga도 root-reducer처럼 분할해야함

 

- generator 사용시 yield로 걸어 놓은 부분을 next()로 한 줄씩 실행 할 수 있기에 테스트에 매우 유리

 

- generator 함수

  * 중단점이 있는 함수

  * yield가 있는 곳에서 멈추어 실행함

  * yield 뒤에 숫자를 넣으면 객체안의 value key에 숫자를 넣어 return

 

- saga의 원리는 generator 함수에 while(true)문안에 yield를 넣어 사용하는 것, 이벤트리스너의 동작과 비슷

 

- all, fork, call, put, take등의 effect가 있음

  * all : 범위안의 함수를 모두 실행

  * fork : generator 함수를 실행

  * take : action이 실행될때까지 기다렸다가 action 실행시 실행

  * put : dispatch 역할

  * throttle : (5000, action.type, function) 5초에 한 번만 실행

  * delay : 몇 초 후에 실행되도록 delay를 줄 수 있음, 비동기 효과의 demmy 작성 시 유용함

 

- 모든 effect들은 한 번만 호출 됨, watch, take, takeLatest, put 등.. 사용자가 만든 함수는 상황에 따라 여러번 호출이 될 수 있으며 그 안의 effect들은 함수가 호출 될 때마다 새로 생기면서 다시 실행되는 것

 

- fork는 비동기 함수 호출, call은 동기 함수 호출( yield와 call을 같이 쓰면 await와 같은 역할)

 

- saga는 비동기 액션을 직접 실행하는 것이 아니라 기다렸다가 액션이 실행되면 그에 맞춰 실행시킴

'Web > Redux' 카테고리의 다른 글

[Redux] 비동기 처리  (0) 2021.06.17
[Redux] dummy 데이터  (0) 2021.06.17
[Redux] reducer 분할하기  (0) 2021.06.17
[Redux] 원리 및 불변성  (0) 2021.06.17