기본 개념

Action

type 속성을 가진 javascript 객체입니다. 어떤 일이 일어났는지를 설명하는 이벤트입니다. 많은 개발자분들이 type, payload를 액션 객체의 속성으로 지정하며 type은 어떤 액션인지 구분하고 payload는 데이터를 담는 속성으로 사용합니다.

액션은 dispatch를 통해 reducer 함수로 보내지면 기존의 state를 기반으로 새로운 state를 생성합니다. 하지만 불변성을 지키는 것이 redux의 원칙입니다.

Dispatch

redux에서 dispatch는 액션을 reducer로 전달합니다. 즉, 상태를 업데이트하는 유일한 방법입니다. 이벤트를 발생시키는 역할을 합니다. dispatch가 동기 혹은 비동기로 작동하는 함수인지 궁금해졌다..

Reducer

reducer함수는 기존의 상태와 action을 받아서 새로운 state를 만들어내는 함수입니다. 이벤트 리스너역할을 합니다.

리듀서는 순수함수로써 몇 가지 규칙을 가집니다.

• state 및 action 인수를 기반으로 새 상태 값만 계산해야 합니다.
• 기존 state를 수정할 수 없습니다. 대신 기존 state값을 복사하고 복사된 값을 변경하여 변경할 수 없는 업데이트를 수행해야 합니다.
• 비동기 논리 혹은 기타 부작용을 수행해서는 안됩니다. 부작용에 대해서는 아래에서 언급하도록 하겠습니다.

Middleware

리듀서 함수에는 몇 가지 규칙이 있는데요. 이 규칙에 의해 리듀서는 side effect를 발생시켜서는 안됩니다.

이 규칙의 목적은 리듀서가 호출됐을 때 예측가능하게 만들기 위함입니다. 만약 리듀서가 부수효과를 가진다면, 디버깅할 동안 부수효과들이 발생할 수 있고 애플리케이션으로 하여금 예상못한 결과를 만들어 낼 수도 있기 때문입니다.
하지만 console.log(state)와 같은 코드는 부수효과이지만 실제로 애플리케이션의 동작방식에 아무런 영향을 주지 않습니다.

side effect 참조 링크

side effect는 함수 외부에 존재하는 state, behavior에 변화를 주는 것을 말합니다.

리덕스 저장소는 비동기 논리에 대해 아무것도 모릅니다. 동기식으로 작업을 전달하고, root reducer 함수를 호출하여 상태를 업데이트하고 UI에 변경 사항을 알리는 방법만 알고 있습니다. 모든 비동기는 저장소 외부에서 발생해야 합니다.

side effect는 리듀서 함수에서 값을 반환하는 것 외에 볼 수 있는 상태 혹은 동작의 모든 변경을 뜻합니다.

리듀서의 함수들은 오직 본인들의 state와 action인자들에만 의존해야 하고 그 인자들을 기반으로 계산한 새로운 상태만을 반환해야 합니다. 다음과 같은 코드들을 실행해서는 안됩니다.

• 리듀서 함수의 외부 스코프에 있는 것들을 변경
• 콘솔에 값 로깅
• 파일 저장
• 비동기 타이머 설정
• AJAX, HTTP 요청 만들기
• 함수 외부에 존재하는 일부 상태를 수정하거나 파라미터를 함수로 변경
• 난수 혹은 임의 ID 생성(Math.random(), Date.now() 등)

참고 : 리듀서가 외부에 있는 함수들을 호출하는 것은 가능한데 예를 들어, 유틸리티 함수들이나 라이브러리로 가져온 경우입니다. 물론, 이것들도 같은 규칙을 따르는 한해서 가능합니다.

따라서 리듀서에 비동기 로직이 존재할 수 없습니다. 하지만, api 서버에 네트워크 요청을 보내서 데이터를 꼭 가져와야만 하는데요. 이때, 미들웨어를 사용해서 비동기 로직을 처리합니다. 대표적으로 thunk, saga가 있습니다.