React관련 싹 훑기(4) - Redux Subscriber는 어떻게 동작하는가

State를 관리할때 가장 헷갈렸던 부분은 어떻게 state는 한 오브젝트로 관리되면서, 특정부분의 변화만을 listening한다음에 컴포넌트에 렌더링할 수 있는가였다. 

 

Redux자체의 subscriber

https://redux.js.org/api/store#subscribelistener

Store | Redux

// 공식문서: https://redux.js.org/api/store#subscribelistener
function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}

const unsubscribe = store.subscribe(handleChange)
unsubscribe()

여기서 보면 handleChange 콜백은 액션이 dispatch되면 무조건 동작한다. 그런데 react에서보면 특정상태가 변했을때 해당 변화를 listening하는 컴포넌트만 re-rendering되는데 어떻게 되는건지 조금 의아했다. 여기 문서를 보면 Redux의 subscriber를 directly하게 쓰지말라고는 해두었다. 그래서 좀더 알아보니 이런글을 찾을 수 있었다. 

 

React-Redux가 필요한 이유

https://stackoverflow.com/questions/36212860/subscribe-to-single-property-change-in-store-in-redux

Subscribe to single property change in store in Redux

이분은 보니까 react-redux같은걸 쓰지않고 directly redux subscriber를 사용하려던거같았다. 답변에 따르면 store의 일부분만을 감지할 수는 없다고 한다. 그래서 react-redux를 사용하면 state의 어떤 부분을 listening해야하는지를 지정할 수 있다고 한다. 

 

https://stackoverflow.com/a/36214442/11811399

Subscribe to single property change in store in Redux

특히 이파트가 감명깊게 잘 써져있었다. 

핵심적인 내용은 아래와 같다. 

 

Redux는 subscribe를 통해서 store 업데이트를 감지하기 위해서 하나의 제네릭한 방법을 제공하고 있다. subscribe의 콜백함수는 아무 arguments를 받지않고, 변화했는지 체크하는 기능도 없다. 여기서 아는건 뭔가 바뀌긴했다 이정도이다. 

 

이것때문에 누군가가 기존의 state와 변경된 새로운 state를 비교하는 로직을 짜서 변화를 감지할 수 있도록 했다. 그리고 이게 react-redux가 제공하는 기능이다.