본문 바로가기
개발 학습/프론트엔드

S2: Redux

by StelthPark 2021. 10. 18.

Index.js의 Action 함수

Action 함수로써 dispatch로 reducer로 보내줄 값을 형식에 맞춰 type:~이 들어간 객체로 만들어 주는 함수이다.

 

Reducer.js

state로 초기값을 첫번째 인자로 두번째는 action으로 받을 객체이다. switch~case문에 의해 Case가 action의 type에 따라 state를 업데이트한다.

 

dispatch

action 함수로 만든 메소드에 인자를 담으면 action함수에 의해 type을 포함하는 action객체가 만들어지고 그 객체를 dispatch 함수를 통해 reducer로 보내게 된다. useDispatch()는 Action 객체를 Reducer로 전달해주는 메소드입니다. Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트겠죠.

 

useSelector

reducer.js에 담긴 state를 가져와서 메인 초기값으로 선언한다. useSelector()는 컴포넌트와 state를 연결하는 역할을 합니다. 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있는 것이죠.

 

 

댓글