React : Redux 를 이용한 증가 감소 버튼 만들기

 

Redux의 기본구조를 알아야 할 수 있는 내용이다.
모르면 기본구조 부터 공부해야 한다.

---

구현할 프로젝트: 증가 버튼을 누르면 5씩 증가 , 감소버튼을 누르면 5 씩 감소

 

---

💙이해하기 쉽게 내가 사용한 함수를 정리해보자 💙

 

< dispatch>

1. dispatch 를 사용하면 == action의 값과 동일하다.

2. dispatch 는 2개의 매개변수를 가질 수 있는데 type 과 payload

3. type 은 이름이고 payload는 내가 원하는 값을 넘겨주는 함수의 매개변수라 생각하면 된다.

4. dispatch ( { type : "이름" , payload :{num:5} } ) 이렇게 중괄호 안에 사용해야 하며 payload는 넘겨줄 값을 쓸때도 {} 안에 키 값과 출력값을 작성한다.

 

 

<useSelector>

1. useSelector 은 store에 저장한 값 즉 state에 있는 값을 app에 넘겨주는 역할을 하는 아이다.

2. let count = useSelector ((state)=> state.count) 이 코드를 해석하면 

state 값에는 count = 0 이라는 초기값이 들어가져 있는데 app에는없고 reducer 파일에 있다.

그래서 store에 전달된 그값을 다시 app으로 전달하는게 useSelector이다 

state 에서 전달할께 => 근데 state 에 있는 모든값을 가져오는게 아닌 count 값만 가져오고 싶어 .count를 하는것

---

app 💛

 let count = useSelector(state=>state.count)   

// useDispath를 dispath란 변수에 넣고 사용한다.
const dispatch = useDispatch()   

// 나는 증가시키는 함수야 payload의 값이 5기 때문에 5씩 증가해
const increse=()=>{    dispatch({type:"INCREAMENT",payload:{num:5}})
//나는 감소시키는 함수야 payload의 값이 5기 때문에 5씩 감소해
const Decrement=()=>{    dispatch({type:"DECREMENT",payload:{num:5}})  }

return(
<>
<button onClick={ increse }> 증가 </button> 
    <button onClick={Decrement}>감소</button>
</>
)

 

< reducer💛>

let initialState={

  count: 0,

  id : "",

  password: "",

}

function reducer(state=initialState,action){

  console.log(action)

 switch (action.type){

 case "INCREAMENT" :

  return{ ...state, count:state.count+action.payload.num };

  case "LOGIN" :

    return{

      ...state,

       id:action.payload.id,

       password:action.payload.password}

    case "DECREMENT" :

      return{

        ...state,

        count :state.count-action.payload.num

      }

 default:

    return {...state}

 

   reducer은 store에 보내주는 값과 같다.

 

<💛순서대로해석💛>

 

1.   let initialState 라는 변수안에 초기값을 넣어 저장해준다. 

 

2.  reducer 라는 함수에 state = initiaState 라는  변수의 값을 저장해준다 . 또한 action도 같이 매개변수로 넣어준다

 

3. action은 뭐지? 하고 콘솔로 찍어보면 dispacth 값이라는걸 확인이가능한다.

 

4. swith문을 이용해서 action.type 이 == INCREAMENT 일 경우 이 값을 반환해줘라 이런것이다.

첫번째 리턴값을보면 

{ ...state 를 하는이유는 우리가 변수안에 count : 0 값을 가져왔지만 그안에 다른 id, password값이 있어 내용을 다 건드릴수 없어

복사본을  하나 만드는 것이다.

count : state.count + action.payload.num 은  state.count 즉 0 의 값과 action.payload.num 값 즉 5 의 값을 더해서

count 값에 새로 넣어주겠다라는 것이다.

 

case 를 하나 더 만들어 action의 type이  "DECREMENT" 인경우 return 반환해줘라

똑같이  ...state를 만들어

count : state.count 즉 0의 값에 action.payload.num 5의 값을 빼주어라 이런 얘기이다.

 

그럼 우리가  만든 버튼을 눌렀을때 증가 / 감소가 실행이 된다.

 

 

---

생각보다 어려울 수 있지만 천천히 하나씩 뜯어보면 이해할 수 있다.

 

나도 이렇게 진행하는데 있어서 몇일이 걸렸지만 어떻게 사용해야 하는지 익히는 시간이였다.

 

오늘도 이렇게 하나를 알아가며 뿌뜻함을 느끼며 성장해 나가는게 보여서 좋다.