더북(TheBook)

12.2.5 구독

 

리액트 컴포넌트에서 리덕스 스토어를 구독(subscribe)하는 작업은 나중에 react-redux의 connect 함수가 대신합니다. 따라서 리덕스의 내장 함수 subscribe를 직접적으로 사용할 일은 별로 없지만, 여기에서는 리덕스 개념을 이해하려고 직접 실행해 보겠습니다.

리덕스 스토어를 구독한다는 것은 리덕스 스토어의 상태가 바뀔 때마다 특정 함수를 실행시킨다는 의미입니다.

리덕스 스토어를 구독하여 상태가 바뀔 때의 상태를 콘솔에 기록하도록 코드를 입력해 보겠습니다.

(...)
const unsubscribe = store.subscribe(() => {
  console.log(store.getState())
});

 

스토어를 구독할 때는 subscribe 함수를 사용하는데요. 이 함수는 함수 형태의 파라미터를 받습니다. 파라미터로 전달된 함수는 스토어 상태에 변화가 일어날 때마다 호출합니다. 이 subscribe 함수가 호출되면 반환 값으로 구독을 취소하는 unsubscribe 함수를 반환합니다. 나중에 구독을 취소해야 할 때는 unsubscribe()를 입력하여 호출하면 됩니다.

그리고 getState 함수는 현재 스토어 상태를 반환합니다.

앞서 작성한 코드에는 스토어에 변화가 일어날 때마다 현재 상태를 읽어 와서 콘솔에 기록하도록 설정해 주었는데요. 아직까지는 아무 액션도 디스패치하지 않았기에 콘솔에 아무것도 나타나지 않습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.