Redux?
자바스크립트 애플리케이션의 예측가능한 상태 컨테이너를 제공하는 가벼운 라이브러리
UI는 리덕스안에 있는 상태를 구독하고 UI는 action을 만들어서 dispatch하고
dispatch된 action을 Reducer를 통해서 새로운 상태를 업데이트하도록 합니다.
이 사이클안에서 자바스크립트 코드를 보면 UI는 리액트가 대부분이고 액션은 일반적인 객체, Reducer는 순수함수, state는 일반적인 객체입니다.
비동기적인 것들이 들어갈 수 있는 부분이 어디일까?
Redux에서는 Middleware라는 또다른 API를 제공합니다.
Middleware는 Redux안에 dispatch 내부적으로 더 들어가면 base dispatch라는 함수가 있다.
base dispatch는 Redcer에 직접적으로 연결이되는 함수입니다.
Middleware는 base dispatch를 감싸게된다.
이런 감싸는 것들을 고차함수(Higher-Order Function)라고 부르게 된다
Middleware는 이런 고차함수(Higher-Order Function)의 일종입니다.
Middleware를 보면 가볍게 빠르고 접근하고 쉽게 사용할 수 있는 라이브러리가 Rudx Thunk이다.
The standard way to do it with Redux is to use the Redux Thunk middleware. It comes in a separate package called redux-thunk
리덕스 다큐먼트를 보면 비동기적인 액션을 어떻게 처리하는지에 대한 방법으로 Redux Thunk middleware를 소개하고 있다.
Redux Thunk를 사용하게되면 여전히 문제가 있다.
간단하게 개발을 할 수 는 있지만 조금더 동작이 복잡해진다고 하면 디버깅같은 작업들이 굉장히 어렵고 추적이 힘들고 테스트가 어렵습니다.
Thunk에서 제공하는 건 단순히 Action creator에 반환이 함수 자체를 실행시켜주는것이기 때문에 개발자가 패턴을 직접 만들어야하고 직접 지켜야 한다.(Action creator의 반환이 Action object가 아니다. 함수를 반환하게 된다.)
Thunk 자체가 편리한건 맞지만 풍부한 라이브러리는 아니다.
그래서 Redux-Saga가 나타나게 됩니다!
Redux-Saga를 사용하게 되면 Redux Thunk의 어려움들을 조금더 쉽게 해결할 수 있다, 테스트 역시 가능하다. 관리하기가 쉽다.
Redux-Saga에서 제공하는 API를 통해서 적당한 패턴을 가지고 서비스로직을 쉽게 만들 수 있다.
Action creator의 반환을 Action object로 정의할 수 있습니다.
정리
처음 리덕스를 사용할때는 동기적이고 순수한 API, UI로 구성이 되어있었고
비동기적인 것은 어떻게 처리 할 것인가에 대해 고민하게 되었고
리덕스에서는 미들웨어를 제공하게 되었고
리덕스사가가 가장 많은 인지도와 함께 편리한 API를 제공하게 됩니다.
Redux-Saga Concept
- Side effect(부수효과)
- 부수 효과 : (자바스크립트) 코드가 외부 세계에 영향을 주거나 받는 것
비동기적인 것들, 데이터 패칭, 브라우저 캐시, 로컬스토리지 같은 것들을 사이드 이팩트라고 칭하게 된다.
여기서 의문
비동기 요청, 브라우저 캐스, 로컬스토리지는 우리가 사용할 수 있는 API인것이지 왜 부작용인가
왜 Side effect인가?
