React숙련주차13(Redux_Payload 및 Ducks 패턴💫)

🔴Payload

🔴Ducks 패턴

---

Payload

action객체를 리듀서에게 보낸다.

그 action에는 type를 통해 동작을, payload를 통해서는 어떤걸 보낼지 보낸다.

모듈을 만들 때, 빈 페이지에 만들어야 할 것을 리스트업 하고 작성하도록 해보기

// src/redux/modules/counter.js

// Action Value

// Action Creator

// Initial State

// Reducer

// export default reducer​

export const plusOne = function(){
    return{
        type: PLUS_ONE,
    }
}

export const minusOne = function(){
    return{
        type: MINUS_ONE,
    }
}

> type만 가지고 있는 action객체를 만들어 왔다.

 

💫action객체

type과 payload라는 두가지의 값으로 이루어진 객체이다.
action type을 payload만큼 처리하는 것이다. 
> payload : 3 / type : + -> 3만큼 action +를 해라

---

UI만들어주기(수를입력하면 그 수를 더해주도록 할 것임)

// App.js
return (
    <>
      <div>현재 카운트 : {counter.number}</div>
      <div>
        <input type="number"></input>
      </div>

      <button onClick={function () {
        // dispatch(plusOne())
      }}>+</button>

      <button onClick={function () {

        dispatch(minusOne())
      }}>-</button>

    </>

  )

---

number 즉 입력하는 숫자의 state를 만들기

// App.js
const[number, setNumber] = useState(0);

---

숫자를 입력하는 input태그에 value, onchange 속성 넣어주기

<input 
    type="number"
    value={number}
    onChange={function(event){
        setNumber(event.target.value)
}}></input>

> number로 입력 받고

> value 속성 : 텍스트 필드에 표시되는 값

>> value 상태를 바인딩하여 value 상태에 저장된 값이 텍스트 필드에 표시, 입력 필드의 초기값이 value 상태와 동기화됨.

 

> onChange 속성 : 사용자가 텍스트를 입력할 때 발생하는 이벤트에 대한 핸들러를 설정

>> 여기서의 이벤트는 사용자가 input에 값을 입력하는것

>> onChange 핸들러를 함수 형태로 정의,

>> 사용자가 텍스트를 입력할 때마다 이 핸들러 함수가 실행,

>> 핸들러 함수는 event 객체를 매개변수로 받고, 해당 객체의 target.value를 사용하여 입력된 텍스트 값을 가져오고

>> setValue 함수를 호출하여 value 상태를 업데이트

>> 텍스트 필드에 입력된 값이 value 상태에 반영되고, 컴포넌트가 리렌더링 됨

 

> event.target.value는 이벤트 객체에서 발생한 이벤트의 대상 요소인 <input> 요소의 현재 값

>> 이벤트 핸들러 함수에서 event.target.value를 사용하여 사용자가 입력한 텍스트 값을 가져올 수 있다.

---

화면상의 숫자가 바뀌게 할것 -> 중앙 관리소의 state의 값이 변경되어야 함

이때, payload를 사용

// src/modules/counter.js

case PLUS_N:
    return {
        // state.number (기존의 nubmer)에 action.paylaod(유저가 더하길 원하는 값)을 더한다.
        number: state.number + action.payload
    }

> 새로운 타입을 만듦

>> 어떤수가 더해질지 모르니 PLUS_N 이라고 하고

>> 리턴으로 number: state.number + action.payload

>> App.js에서 number_input에서 입력 할 값에 대한 state를 만들었고 그 상태_state의 number에서 action의 payload를 더해줘서 리턴하겠다

➕

action value지정

// src/modules/counter.js
export const PLUS_N = "PLUS_N"

➕

action creator : action vallue를 return하는 함수지정

// src/modules/counter.js
export const plus_n = function(payload){
    return{
        type: PLUS_N, 
        payload: payload,
    };
}

> action객체를 return해준다(action객체 : type과 payload라는 두가지의 값으로 이루어진 객체)

> action의 payload만큼 type를 하겠다.

>> 함수는 받은 payload를 payload 속성에 할당하여 액션 객체를 생성한다.

>> 이렇게 생성된 액션 객체는 Redux 스토어로 dispatch되어 상태 변경을 트리거하고 리듀서에서 처리할 수 있게 된다. 

 

payload가 필요한 Action Creator에서는 함수를 선언할 때 매개변수 자리에 paylaod를 넣어줘야 한다. 왜냐하면 Action Creator를 사용하는 컴포넌트에서 리듀서로 보내고자 하는 payload를 인자로 넣어줘야 하기 때문이다.

(인자로 payload를 넣어줌으로써 Action Creator가 액션객체를 생성할때 payload를 같이 담아 생성하는 원리이기 때문)

---

import해주고

// App.js
import { plus_n } from './redux/modules/counter';

 

사용될 수 있도록 기능에 추가를 해줘야 된다.(+버튼을 누르면 입력값이 더해지도록)

➕

// App.js
<button onClick={function () {
  dispatch(plus_n(number))
}}>+</button>

> counter.js에서 plus_n을 사용하기 위해서는 인자로 payload를 넣어주었고

> payload로써 입력값을 얼만큼! 얼만큼 즉 입력 숫자 만큼 증가 시켜줄것이라는 것을 명시해줘야함

>> 그래서 그 값은 input의 number로 state해줬고 그래서 인자로 number을 넣어줌

 

🔴 인풋에서 입력된 값이 카운터에서의 플러스엔의 페이로드로 들어가고 들어간 값만큼 PLUS_N을 해줄것이고 리듀서 부분의 그 PLUS_N은 number: state.number + action.payload을 리턴한다.

💫
리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.

payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.

리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.

---

Ducks 패턴

 

리덕스를 사용하기 위해서는 결국 우리가 리덕스의 구성요소를 모두 만들어야만 사용이 가능한데, 리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현한다 그래서 Erik Rasmussn 라는 개발자가 이것을 패턴화하여 작성하는 것을 제안했고 그것이 바로 Ducks 패턴이다.

1. Reducer 함수를 export default 한다.
2. Action creator 함수들을 export 한다.
3. Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.