Redux_TIL(30)

앞 전의 redux정리를 이어 받아서 이젠 값을 변경해보려고 한다.

먼저 오늘 정리 할 내용✅

1.Redux는 state변경이 reducer에서 일어난다.

2.만약 counter.js module에 있는 number에 값 변경을 해준다면...?!

---

1.store에 있는 값 변경하기

위의 질문의 답은

Reducer에게 명령을 보낸다. ( reducer가 명령을 받아서 값을 변경한다라고 생각하면 될 듯)

명령을 redux에서는 "action"이라고 한다. => reducer가 명령을 실행하고 이 보내는 명령은 객체로 보내게 된다 (=action 객체)

이 action객체란?

{type: "PLUS_ONE"}              //대문자를 사용해준다..? 약속이라던데

위와 같은 type를 꼭 같이 적어서 보내야한다. 왜냐면 이 type을 가진 key형식을 인식하여  reducer가 어떠한 명령인지 알 수 있기 때문이다.

 

이 때 명령을 보내려면 useDispatch라는 hook을 사용해야하는데 userSelector와 동일하게 Import해서 사용해주면 된다.

const App=()=>{
 const dispatch = useDispatch( );   //함수니까 ()꼭 붙여주자!
  return <div><button onclick={()=>{
  	dispath({type: "PLUS_ONE"})}}>+1</button></div>
 }

저기 useDispatch()함수의 괄호 안에는 action객체(=명령을 보내는 형식)를 넣어주어야한다.

즉, 위에서 지정한 dispatch의 인자로 action객체를 넣어준다. 저기 코드로는 "PLUS_ONE"이 들어간 자리다.

 

이 코드는 dispatch를 통해서 +1이라는 action을 실행하라는 코드이다.

이렇게 명령을 보내주면 reducer가 action을 받고 어떻게 행동을 해야할지 코드로 작성해주면 된다.

다시 module에 와서  counter.js를 보자

reducer가 action객체를 받아서 상태를 바꾸는 원리는 action안의 type를 switch문으로 하나씩 검사를 해서 일치하는 케이스를 찾는다.

(type이라는 키를 보내주는 이유!)

---

reducer의 기본구조(다시보자)

const counter = (state =initialState,action)=>{

  switch (action.type){
  	default:
    	return state;
  }

}

=>type와 case가 일치하는 경우 값을 반환=> 새로운 state를 반환한다.(module의 새로운 state가 된다.)

  이 state를 갖고 있던 component들에선 update값을 받는다.

const initialState={
  number=0
};

const counter =(state = initialState,action)=>{
        //console.log(action)=> "PLUS_ONE"
  switch(action.type){
   case"PLUS_ONE";
  	return{number:state.number+1};
   default:
   	return state;
   }
}

이렇게 case가 "PLUS_ONE"인 친구들만 return을 기존의 number의 state.number가 +1이 될 수있도록 했다.

이렇게 reducer가 dispatch를 통해서 action객체를 받아서 반환해야할 행동(?)을 볼 수 있다.

그러면 다시 component에 가서 다시 store을 연결 해주면 된다.(까먹지말자)

const number = userSelector((state)=>state.counter.number);
    //module안에 있는 counter의 number를 가져온다 즉, 새로 갱신된 값을 가져오는 거임(+1)

---

2.버튼구현하기(마이너스)

플러스버튼을 구현해놨으니 오히려 마이너스는 쉽다.

먼저 당연히 마이너스 버튼을 하나 만들어 준다 그리고 거기에 onClick={()=>{dispatch({type:"MINUS_ONE"})}을 보내준다.

당연히 지금 명령을 내려주니까 component에서 보내야 하고 이제 이 명령을 받을 module파일의 counter.js에 가자.

switch(action.type){
   case"PLUS_ONE";
  	return{number:state.number+1};
   case"MINUS_ONE";
   	return {number:state.number-1};
   default:
   	return state;
   }

switch문의 case를 추가해준다. 그럼 마이너스 기능 끝..!

---

사실 이렇게만 강의보고 자료를 정리하는 것만 해도 어느정도 이해는 되는데 막상 내가 하려니 어디서부터 시작을 해야할까 막막한

경험을 요즘 자주 느끼고 있다.

튜터님이 계속해서 따라쳐보는게 머릿속에 더 많이 남으니 계속 쳐보라고 하시던데 그게 맞는듯

주말을 이용해서 투두리스트도 만들어보고 잘만드시분 코드도 따라 쳐보고 ㅠㅠ 

그리고 reduce부분도 좀 더 공부를 해야겠다. 오늘의 TIL😎