Redux Saga

jtwjs·2021년 12월 11일
0

상태관리

목록 보기
4/4
post-thumbnail

Redux Saga

  • Redux의 비동기처리를 위한 미들웨어
  • generator함수 기반으로 비동기작업을 관리
  • redux-saga의 sagagenerator 함수를 의미한다.
  • generator 함수에서 action에 따른 작업을 yield

Thunk와의 차이점

  • Thunk는 비동기액션함수를 직접 호출하는 형식이지만 Saga는 제너레이터 함수를 등록하여 이벤트 핸들러와 같은 느낌으로 지정한 액션이 호출될때 낚아챈다.

장점

  • generator 함수를 이용하기 때문에 테스트하기 용이하다.
    • next()를 이용하면 yield로 구분되어진 영역이 나눠서 실행되기 때문

단점

Generator란?

  • function* 키워드를 사용하여 만든다.

구성

store/configureStore.js

import createSagaMiddleware from 'redux-saga';

import rootSaga from '../sagas'

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const store = createStore(reducer);
  store.sagaTask = sagaMiddleware.run(rootSaga);
  
  return store;
};

saga effects

  • react saga가 제공하는 다양한 기능들
  • effects 앞에 yield를 붙여서 실행

all

  • 배열을 인자로 받고 배열안에 들어있는 것들을 한번에 실행
yield all([
  fork(watchLogin),
  fork(watchLogOut),
]);

call

  • 다른 saga들이나 promise 등을 호출(실행)
  • 인자로 넘긴 콜백함수의 결과값을 받아올때까지 기다렸다가 진행(동기식)
  • call에 첫번째 인자로 등록한 함수에 데이터를 전달하려면 등록한 함수에 데이터를 바로 전달하는것이 아닌 call의 다음 인자로 전달해야 한다. (fork도 동일)
yield call(api, data, data2, data3)

fork

  • 인자로 넘긴 콜백함수의 결과값을 받아올때까지 기다리지 않고 진행(비동기식)
fork(watchLogin, data)

put

  • redux 스토어에 액션을 디스패치한다

take

  • 액션이 디스패치되기를 기다린다.
  • 액션이 실행되면 두번째 인자로 전달한 제너레이터 함수를 실행
  • 일회성이므로 한번 실행되고 더이상 실행이 안됨
yield take(action, gen);

takeEvery

  • take와 다르게 모든 액션을 유효하게 인정

takeLatest

  • 같은 액션이 동시에 여러번 호출되면 마지막 액션 하나만 유효하게 인정
  • 마지막 액션 하나만 유효하다고 해서 나머지 요청을 서버로 보내는 것을 막는것은 아니다.
  • 서버로 요청은 보내지만 클라이언트에서 나머지 응답을 취소하고 마지막 응답만 허용하는 것
  • 즉, 요청을 취소할수 없으므로 서버에 데이터 변경은 여러번 일어난다.(서버측에서 반드시 같은 데이터 변경이 일어날때의 검사작업 필요)

takeLeading

  • 같은 액션이 동시에 여러번 호출되면 첫번째 액션 하나만 유효하게 인정

throttle

  • 같은 액션이 연이어 호출 되면 설정한 시간이 지나기 전에 다시 호출되지 않도록 하는 것
  • 서버로 요청을 보내는것을 막을 수 있음
  • 특수한 경우에서만 활용됨
yiled throttle(action, gen, sec);

debounce

  • 같은 액션이 연이어 호출되면 마지막 함수(또는 제일 처음)만 호출되도록 하는 것

select

  • 셀렉터를 사용하여 기존 애플리케이션 상태의 일부를 얻어온다.

cancel

  • fork되었던 서브 프로세스를 취소

cancelled

  • 현재 프로세스가 캔슬되었었는지 확인

delay

  • 다음 구문으로 이동하기 전에 주어진 기간동안 대기
  • promise를 반환한다.
profile
Front-End 😲

0개의 댓글