Redux & Redux-Saga 정리

rkdghwnd·2023년 5월 2일

1. Redux란?

공식 문서에서의 정의

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.
Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

나의 생각 : Redux는 상태를 컴포넌트 외부의 전역 저장소에 저장해서 상태 끌어올리기(Lifting State Up)와 같은 복잡한 로직을 최소화 할 수 있는 패턴이다.

2. Redux의 세 가지 규칙

단일 스토어
하나의 애플리케이션에는 하나의 전역저장소(스토어)가 있어야 한다.
상태는 읽기 전용
리덕스 상태는 읽기 전용이다. 상태를 업데이트 할 때는 기존의 객체를 수정하는 것이 아닌, 새로운 객체를 생성해 주어야 한다. (리듀서에서 새로운 객체를 리턴해야하는 이유)
리듀서는 순수한 함수
리듀서는 순수한 함수여야 한다.
순수한 함수의 조건

동일 input, 동일 output
외부에 직접 영향을 주어서는 안됨(외부 변수 직접수정 금지)
리듀서는 ?
리듀서 함수는 이전 상태와 액션객체를 매개변수로 받고, 매개변수에 의존해서 결과값을 만들어 낸다
동일한 매개변수(이전 상태, 액션객체)에 동일한 결과값(새로운 상태)

3. Redux 기본 개념 정리

액션(action)
상태를 변화시키기 위한 객체, { type: 'LOG_IN_REQUEST',data: {id:1, password:2}} 와 같은
방식으로 dispatch시 매개변수로 전달한다.
리듀서(Reducer)
상태를 변화시키는 함수, dispatch를 통해 리듀서에 접근하면 액션 type에 맞는 로직을 실행시켜 상태변화를 일으킨다.

const initialState = { counter : 1};

function reducer(state = initialState, action){
  switch (action.type) {
    case INCREMENT:
      return {
      	counter: state.counter + 1
      };
    default:
      return state;
  }
}

스토어(store)
상태를 저장하는 전역 저장소, 한개의 어플리케이션은 하나의 스토어를 가진다.
디스패치(dispatch)
액션을 발생시키는 스토어의 내장함수. 상태변화를 일으키고 싶을 때 디스패치를 사용한다.
디스패치를 호출하면 리듀서 함수를 실행시켜 새로운 상태를 만든다.(상태변화)
구독(subscribe)
함수 안에 리스너 함수를 파라미터로 넣어서 호출 해 주면, 상태가 업데이트 될 때 마다 해당 리스너 함수가 호출된다.

const listener = () => {
  console.log('상태가 업데이트 됨')
}
const unsubscribe = store.subscribe(listner);

unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

리덕스에서 데이터의 흐름

디스패치에 액션 객체를 넣어 호출하면, 리듀서가 호출되고 해당하는 액션 객체의 type에 맞는 로직이 실행된다. 로직의 실행 결과로 새로운 상태를 반환하고 , 전역 저장소에 반환되며, 변화된 상태는 UI하면에 반영된다.

4. Redux middleware란?

리덕스에서 액션을 디스패치 했을 때, 리듀서가 실행되기 전에 실행되는 작업
이러한 미들웨어 패턴을 통해 하나의 디스패치로 여러개의 디스패치를 실행 시킬 수 있다.
주로 비동기 관련 로직을 구성 할 때 미들웨어 패턴을 많이 사용한다.

대표적인 리덕스 미들웨어 모듈 : redux-thunk, redux-saga

5. Redux-Saga

리덕스 미들웨어의 하나로 redux-thunk보다 좀 더 많은 기능을 지원하다.
다음과 같은 상황에서 redux-saga를 사용하는것이 유리하다.

기존 요청을 취소 처리해야 할 때(불필요한 중복된 요청을 방지 할 때)
특정 액션을 발생했을때 다른 액션을 발생시켜 API 요청을 만들어 낼 때
웹 소켓을 사용할 때
API 요청 실패 시 재요청해야 할 때

제너레이터 함수 이해하기

redux-saga에서는 ES6의 제너레이터(generator)문법을 사용한다.

function* generatorFunction() {
  consonle.log('안녕하세요');
  yield 1;
  console.log('제너레이터 함수');
  yield 2;
  console.log('function*');
  yield 3;
  return 4;
}

const generaotr = generatorFunction();

generator.next();
// 안녕하세요
// {value: 1, done: false}
generator.next();
// 제너레이터 함수
// {value: 2, done: false}
generator.next();
// function*
// {value: 3, done: false}
generator.next();
// {value: 4, done: true}

제너레이터 함수는 function* 키워드로 선언한다.
yield 는 제너레이터 함수에서 사용가능한 문법이다.
yield를 이용해 해당하는 값을 반환시키고 다시 이어서 다음 로직을 실행시킬수 있다.
위의 로직은 제너레이터 함수를 호출한뒤 .next()를 통해 yield 값을 순차적으로 반환하는 로직이다.

사가 함수 만들기

사가에서 제공하는 takeLastest, debounce 등의 메소드를 통해 중복된 요청에 대한 처리를 해주는 제너레이터 함수 + 실제 비동기 요청에 대한 로직을 처리하는 제너레이터 함수 패턴이 일반적
사가 함수가 많아지면, yield all을 통해 사가 함수를 모아서 처리하는 것이 좋다.
스토어에 redux-saga를 꼭 등록해 주어야 한다.