[ Redux + Saga ]

1. async/await이든 Redux-Saga 사용상의 이점은 크게 없다.
2. 하지만 좀 더 자세한 동작에 대한 handling을 가능하게 하는 것이 Redux-Saga이다(takeLatest(), next()등)
3. 코드 량은 현저히 async/awiat가 적다.

질문

왜 Rudx를 사용하고 saga, thunks를 사용할까?

 

Redux became the de facto standard as a data management technology for ReactJS applications. It is a convenient and easy method of structuring data in an application and displaying it on the client. Yet we hit a certain problem here. There is no place for side effects in the Redux scheme of work. As in the context of this article, only network requests are seen as side effects. Middleware can solve this problem.

 

결국 Redux는 side Effect 가 없지만  API 비동기 처리에서 발생하는 Side Effect를 관리하고 처리 하기 위해서 Saga, Thunks가 생긴것이다.

그러면 Async/Await와 무슨 차이인것인가?

 

- 엄청 큰 이점이 있는것은 아니지만

- takeLatest() 의 장점이 있다.

-  saga 함수인 delay,put, takeEvery, takeLatest, call, all

 

Delay

설정된 시간이 이후에 resolve 

delay(1000) : 1초 기다린다.

 

put

특정 액션을  dispatch하도록 한다.

 

takeEvery

들어오는 모든 액션에 대해 특정 작업을 처리해 준다.

 

 takeLatest

기존에 진행중이던 작업이 있다면 취소 처리하고 가장 마지막으로 실행된 작업만 수행한다.

 

call

함수의 첫번째 파라미터는 함수, 나머지는 파라미터는 해당 함수에 넣을 인수

주어진 함수를 실행

 

react-saga vs react-thunks

비슷 하지만 

thunks 는 액션으로 모든 것들이 동작한다고 생각하면 된다.

saga는 비동기 처리에 대해서 action으로만 의지해서 움직이지 않는다.

 

예를 들어 로그인

 

- component -> onClick -> api ( 하나의 액션으로 작동된다. )

- 로딩중 action 발생 ( isLoading: true )

error: 오류 액션

success: 성공 액션

 

component 는 error 와 isLoading 만 바라 보고 있으면 된다.

 

참고

velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4-%EB%B4%85%EC%8B%9C%EB%8B%A4-

 

참고

 

thecodebarbarian.com/redux-saga-vs-async-await

Redux Saga vs Async/Await

sustainable-dev.tistory.com/94

redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest)

ehddnjs8989.medium.com/redux-saga-%EB%8F%84%EC%9E%85%EC%8B%9C-%EA%B2%AA%EC%97%88%EB%8D%98-%EC%83%9D%EA%B0%81-26cb30c690a4