[TIL] useSelector / useDispatch

useSelector

👉 우리가 살펴볼 첫 번째 React-Redux Hook인 useSelector 는 React 구성 요소가 Redux 저장소에서 데이터를 읽을 수 있게 해주는 Hook 이다.

👉 useSelector 는 매개변수로 selector 함수 라고 하는 단일 함수를 허용한다. selector는 전체 Redux store state를 인수로 사용하고 state에서 일부 값을 읽고 해당 결과를 반환하는 함수이다.

const counter = useSelector((state) => state);
console.log(counter);

우리가 만든 counter라는 reducer의 state를 확인할 수 있다.
이렇게 useSelector의 매개변수로 함수가 들어가는데, 이 함수의 인자는 현재 Redux store에 존재하는 모든 reducer 인 것이다.

counter라는 reducer에 접근하려면 다음과 같이 하면 된다.

const counter = useSelector((state) => state.counter); 

console.log(counter);

store.subscribe()를 호출하여 store의 변경사항을 확인할 수 있으므로 모든 컴포넌트에 이러한 코드를 작성할 수 있지만 그럴 필요가 없다.

다행히도 useSeletor는 자동으로 redux store를 subscribe 한다. 그러면 action이 dispatch 될 때마다 selector 함수가 다시 호출된다.
selector에서 반환된 값이 마지막 실행되었을 때와 달라지면 useSelector 는 컴포넌트를 새로운 데이터로 리렌더링 한다. 컴포넌트에서 한 번만 useSelector()를 호출하면 나머지 작업은 redux가 알아서 수행한다.

useDispatch

👉 dispatch : Action 객체를 reducer로 보내는 전달자 함수
👉 dispath를 사용하기 위해서는 useDispath()라는 Hook을 이용한다.

Redux store의 데이터를 컴포넌트로 읽어오는 방법은 useSelector()이다.
그리고 컴포넌트에서 store로 action을 전달하는 방법은 useDispatch()이다!

따라서 action을 dispatch해야 하는 모든 구성요소에서 const dispatch= useDispatch() 를 호출한 후 필요에 따라 dispatch(일부 액션)를 호출할 수 있다.

const dispatch = useDispatch();
...
dispatch({ type: "PLUS" });

[Redux의 흐름]
1. View 에서 액션이 일어난다.
2. dispatch 에서 action이 일어나게 된다.
3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다.
5. reducer 의 실행결과 store에 새로운 값을 저장한다.
6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

정리

• store :store는 데이터를 넣는 공간으로 state 를 넣는다고 보면 된다. createStore는 reducer를 매개변수로 요구한다. 결과값은 getState()메소드를 통해 출력 할 수 있다.
• reducer : reducer는 state를 변경 시키는 함수로 사용자가dispatch를 통해 보내는 action 객체를 통해 state값들을 변경한다. number, array, object등 원하는 데이터를 이곳에서만 변경하며, 변경하는 값은 action 객체를 통해 구분하여 처리한다. reducer의 연산이 끝나고 return하는 값이 현재의 어플리케이션 state값이 되며 store에 등록된다.
• action : store에 등록하는 reducer를 소통하기 위한 방법으로 action을 사용한다. action은 type이라는 key를 필수로 값는 Object형태의 데이터다. action은 그럼 reducer에 어떻게 보내질까? dispatch메소드를 활용한다. dispatch는 store에서 제공하는 메소드로 reducer를 동작시키게 만든다.