Redux

React Redux

리액트에서 리덕스를 사용하면 상태 업데이트에 관한 로직을 모듈로 따로 분리해 컴포넌트 파일과 별개로 관리할 수 있습니다. 상태과 UI코드를 분리해 관리하면 코드 유지보수에 도움이 됩니다. 여러 컴포넌트에서 동일한 상태를 공유 할 때, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화 할 수도 있습니다.

Component Container 파일 분리 : Container는 리덕스와 연동되어 리덕스로부터 상태를 받아 오거나 스토어에 액션을 디스패치 한다. 관심사의 분리가 이루어져 코드의 재사용성이 높아진다.

Redux 3가지 규칙

단일 스토어
읽기 전용 상태 상태 업데이트 시 새로운 객체 생성, 기존 객체에는 영향을 주지 않아야 함. 불변성 유지 필수 : 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality)를 하기 때문에
reducer는 순수함수 이전 상태와 액션 객체를 파라미터로 받음. 파라미터 외의 값에는 의존하면 안됨. 기존 상태에는 영향을 주지 않고, 변화에 따라 새로운 상태 객체 반환 언제나 같은 결과 값을 반환해야 함. (random 사용 X)

middleware

reducer가 액션을 처리하기 전에 실행되는 함수로 함수 3개가 중첩되어 있습니다다. store 와 action 을 기반으로 필요한 작업을 수행할 수 있습니다.

action ➔ middleware ➔ reducer ➔ store ➔ view ➔ action

전달받은 액션을 콘솔에 기록
전달받은 액션 정보를 기반으로 액션을 취소
다른 종류의 액션을 추가로 디스패치

//기본구조 (arrow)
  const middleware = store ➔ next ➔ action ➔ next(action)

//기본구조
  const middleware = function(store){
    return function(next){
      return function(action){
        return function(action);
      };
    };
  };

redux-thunk vs redux-saga

redux-thunk
- 비동기 코드가 중첩되지 않는 간단한 로직일 때 선택한다.
- 간단하게 시작할 수 있다.
- 객체가 아닌 함수형태의 액션을 디스패치한다.
redux-saga
- 여러 개의 비동기 코드가 사용될 때 선택한다.
- 제너테이터를 적극적으로 활용한다. 테스트코드 작성이 쉽다.
- 특정 액션이 디스패치 되었을 대, 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 한다.
- redux-saga를 선택하면 좋은 상황
  - 기존 요청을 취소 처리해야할 때
  - 특정 액션이 발생했을 때, 다른 액션을 발생시키거나 API 요청 등 리덕스와 관계없는 코드를 실행할 때
  - 웹 소켓을 사용할 때
  - API 요청 실패 시 재요청 해야 할 때