Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

민규의 개발블로그

Redux-Saga (NEXT) 본문

React

Redux-Saga (NEXT)

규몽 2020. 12. 11. 19:38

작성중...

 

Redux에서는 비동기 처리를 못하기 때문에 미들웨어란걸 쓴다.

대표적인 미들웨어 중에서는 Redux-thunks, Redux-Saga가 있다.

 

Redux-thunks는 간단하게 얘기하자면 dispatch를 묶어서 한번에 비동기적으로 여러번 할 수 있다. 

 

Redux-Saga는 쉽게 thunks에서 여러 기능이 추가된 미들웨어라고 이해했다.

 

Redux-Saga를 쓰려면 JavaScript의 제너레이터 함수의 개념을 알고 있어야 한다.

간단하게 제너레이터 함수란 중단점이 있는 함수로 한번에 함수 내에 yield 까지만 실행한다.

yield 뒤에 뭘 넣으면 value값

 

  • 제너레이터를 이용한 이벤트 리스너 - 사가가 활용
  • 무한의 개념도 활용가능 제너레이터를 이용해서

next에서 Saga 설정 방법

 

store에서

import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas';
const sagaMiddleware =createSagaMiddleware( );
하고 middlewares 배열에 넣어준다.

store.sagaTask = sagaMiddleware.run(rootSaga)

 

 

그다음 withReduxSaga로 Saga를 활용할 컴포넌트를 감싸준다.(HOC)

 

saga 이펙트
rootSaga 하나 만들어놓고 우리가 넣어주고싶은 비동기 액션을 하나씩 만들어 넣어준다.
all: all 함수 안에 배열 안에 들어있는 것들을 한방에 실행해줌 
fork:함수를 실행하는 것
take: 첫번째 인자 로그인이란 액션이 실행되면, 뒤에 두번째 인자 제너레이터함수를 실행한다.
put: 액션을 dispatch라고 생각 
call: fork와 비슷하긴한데 다름 fork는 비동기함수 호출 call은 동기함수 호출 call은 data를 받아올때가지 기다려줌, fork는 받아오는거 안기다리고 바로 다음 함수 실행해줌 
첫번째 인자는 함수 두번째 인자부터는 첫번째 인자함수의 인자가 된다.

 

 

'React' 카테고리의 다른 글

immer로 불변성 관리를 쉽게 하자  (0) 2020.12.18
SSR과 CSR  (0) 2020.12.09
React hooks로 최적화 하기(useMemo, useCallback)  (0) 2020.12.07
React - hooks (useEffect)  (0) 2020.12.07
재렌더링이 일어나는지 확인하는법  (0) 2020.12.03
Comments