Redux 정리 (3) : dispatch, useSelector, 컴포넌트가 상태를 업데이트하는 과정 총정리

dispatch

dispatch는 Store의 메서드로, action을 Store에 전달하여 발생시키는 역할을 한다. store.dispatch(action)의 형태로 사용한다.

---

subscribe

subscribe는 Store의 메서드로, Store의 state(상태)가 변경될 때마다 특정 함수를 자동으로 호출한다. 컴포넌트에서 Store의 상태를 실시간으로 감지하고, 상태가 업데이트되면 자동으로 리렌더링을 할 수 있게 한다.

* subscribe 함수를 실제로 사용할 일은 크게 없다.
  보통 redux의 connect 함수 또는 react redux의 useSelector 훅을 사용한다.

---

useSelector

useSelector 훅(hook)은 redux store의 state를 component와 연결하여 state를 선택적으로 가져올 수 있게 해준다.

컴포넌트가 리덕스 스토어의 상태에 연결되었을 경우, 상태가 변경되면 해당 컴포넌트들이 업데이트되어 화면에 새로운 데이터가 반영하여 리렌더링 되게 된다.

// 예시 상태 선택 함수
const selectCounter = (state) => state.counter;

// 컴포넌트에서 useSelector 사용
import { useSelector } from 'react-redux';

const CounterComponent = () => {
  const counter = useSelector(selectCounter);

  return (
    <div>
      <p>Counter: {counter}</p>
    </div>
  );
};

---

총정리 : component가 상태를 업데이트하는 과정

1. component가 dispatch를 통해 action을 스토어에 전달한다.
   1-1. store.dispatch(action)의 형태로 전달한다. 
   
   
2. 해당 action에 맞는 처리를 하는 reducer를 호출한다.
   2-1. rootReducer를 통해 각 reducer에 전달되고, action의 type을 바탕으로 reducer가 선택된다.
   2-2. reducer는 이전 상태와 전달받은 action을 이용하여 새로운 상태를 반환한다.
   
   
3. reducer에서 state가 업데이트되면 새로운 state가 생성된다.
   3-1. 불변성을 지키기 위해 이전 상태와 다른 객체로 생성된다.
   3-2. 이전 상태와 새로운 상태가 다르면, redux store가 변경사항을 인지하고 연결된 component들에 새로운 상태가 전달된다.
   
   
4. component에서 store의 state를 실시간으로 감지하던 useSelector hook이 state가 업데이트되면 자동으로 리렌더링한다.

---

연결된 포스트

이전 포스팅은 아래와 같다.

https://sunshineyellow.tistory.com/162

Redux 총정리 (1) : 기본 파일 구조 및 reducers (rootReducer, initialState, switch문, Store)

https://sunshineyellow.tistory.com/163

Redux 총정리 (2) : actions (액션생성자함수, type, payload)

---

출처 : React document, 벨로퍼트, ZeroCho, chatGPT