Redux-02

Noa·2022년 12월 2일

React

목록 보기
16/22

리덕스 흐름 도식화

store 에 있는 state값 변경하기

값의 수정은 reducer (변화를 일으키는)함수에서 일어난다. => 그럼 우리가 만약에 counter.js 모듈에 있는 number에 +1을 하고 싶으면 => 리듀서에게 보낼 number를 +1 하라는 “명령”을 만든다.=> 명령을 보낸다 => 리듀서에서 명령을 받아 number +1을 한다.
=> 내가 어떤 action을 하길 원한다는 것을 reudcer에게 표현을 하면 reducer가 실행한다. => 이행동을 code로 나타내면 객체,

action객체


반드시 Type이라는 key를 갖는 객체를 넣어서 꼭 형식을 맞추어야 한다. => reudcer는 객체안에서 type이라는 key를 보기 때문에 => Action 객체를 보내기 위해서는 useDispatch 라는 hook을 사용해야한다.

useDispatch()

const dispatch = useDisaptch() 이런식으로 사용하면 함수이다. => 괄호 안에 action객체를 넣어준다.

useDispatch 는 꼭 함수형태로 작성해야한다!

useDispatch를 통해서 action 객체를 reducer로 보낼 수 있다. => action 객체를 받아서 무엇을 하도록 코드로 작성을 해줘야 한다.

action 객체를 받는 방법

button을 눌렀을때

counter에 있는 number state를 실제로 변경하는 로직 작성
switch 문을 통해서 key 값 비교해서

제대로 값이 변경이 되는지 확인 useSelector를사용하여 store안에 있는 값이 제대로 변경이 되는지 확인

-1 기능도 구현


버튼 만들어서 액션 객체를 보내주고 받고, 모듈로 가서 Case문 만들고 => 다시 가서 app.js가서 확인

Action 객체란 반드시 type이랑 key를 가져야하는 객체이다. => 또한 Reudcer로 보낼 명령이다.

dispatch 란 action 객체를 reducer로 보내는 전달자 함수이다. (useDispatch 훅이용)

dispatch({ type: "MINUS_ONE" }); dispatch({액션객체 })

reducer라느 dispatch를 통해 전달받은 action 객체를 검사하고, 조건이 일치 했을 때 새로운 상태값을 만들어내는 변화를 만들어 내는 함수.

액션객체의 type이 왜상수인지 공부하자.

profile
몰입

0개의 댓글