Redux 란 ? redux-thunk, redux-saga

이론적인 내용만 정리. 예시 코드는 하단 벨로퍼트 링크에 아주 잘 명시되어 있다.

redux는 자바스크립트 상태관리 라이브러리이다.
redux 본질은 node.js 모듈이다.

redux 기본 개념

• 단일 소스
  • 동일한 데이터는 항상 같은 곳에서 가지고 나온다. (store)
  • 즉 스토어라는 공간은 하나만 존재한다.
• 읽기 전용
  • 액션이라는 객체를 통해서만 상태를 변경 할 수 있다.
• 순수 함수로만 변경이 가능하다.
  • 즉 reducer는 순수 함수여야 한다.

store

스토어는 상태가 관리되는 하나만 존재하는 공간이다.

• 컴포넌트와 별개로 스토어라는 공간이 있어서 필요한 상태를 담는다.
• 필요한 컴포넌트에서만 스토어에 접근을 한다.

action

주문서라고 볼 수 있다.

• 액션은 앱에서 스토어에 운반할 데이터 다르게 보면 저장할 데이터라 볼 수 있다.
• 객체 형식으로 되어 있다.

reducer

• 액션이 직접 스토어에 저장할 수 없다. 따라서 reducer를 통해 전달이 가능하다.
• 액션에 데이터를 보고 스토어의 상태를 업데이트 하는 것이다.
• 액션을 reducer에 전달하기 위해서는 dispatch() 매소드를 이용한다.

redux-thunk

비동기 작업을 처리 할 때 사용하는 가장 기본적인 방법이다.

• action 함수는 여러 동작을 하는데 제약이 있다.
• 또한 원할 때 동작하는 함수를 만들 수 없다.
  • 예시로 1초 뒤 실행하는 함수를 만들 수 없다.
• 따라서 비동기 통신처럼 기다리는 함수 또는 내부 여러가지 작업을 할 때 미들웨어를 사용한다.

redux-saga

redux-thunk 다음으로 많이 사용되는 라이브러리이다.

• 특정 action을 모니터링하고 있다가 action이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용
• 특정 작업은 어떤 코드를 실행할 수도, 다른 액션을 디스패치 하는 것일 수도 있다.
• redux-thunk로 못하는 다양한 작업을 처리할 수 있다.
  • 비동기 작업을 할 때 기존 요청을 취소할 수 있다
  • 특정 작업을 할 수 있다
  • 웹소켓에 경우 Channel 기능을 통해 효율적인 코드 관리가 가능하다.
  • API 요청 실패 시 재 요청 작업을 할 수 있다.

참고

리덕스 docs
벨로퍼트