redux payload, Ducks

playload란?

전달되는 실체의 양이라고 볼 수 있다. 

즉  action에서의 payload는 type을 payload만큼 처리하는 것이다. 

 

playload가 3이라면 type이 3번 처리되는 것이 된다. 

 

카운터에서 임의로 주어주는 숫자만큼 더하고 빼는 기능을 넣기 위해서 payload를 이용할 수 있는데 그러기 위해서 기존의 UI에 input을 추가해줘야한다.

• UI 수정

const[number, setNumber]= useState(0)

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

리렌더링을 위해서 state를 만들어주고 인풋에 연결해준다. 

그리고 해야할 일은 action의 타입을 추가하는 것이다.

• aciton type추가

const PLUS_N = "counter/PLUS_N"
const MINUS_N = "counter/MINUS_N"
 
       case PLUS_N:
            return {
                number: state.number + action.payload
            }
        case MINUS_N:
            return{
                number: state.number - action.payload
            }

 

• action Creator 만들기

export const PLUSN=(payload)=>{
    return {
        type:PLUS_N,
        payload: payload
    }
}
export const MinusN=(payload)=>{
    return {
        type : MINUS_N,
        payload,
    }
}

인자로 받은 것은 것을 payload로 쓰이게 한다. 

• import 후 onclick 바꾸기

      <button onClick={()=>{
        dispatch(PLUSN(number))
      }}>+1</button>
      <button onClick={()=>{
        dispatch(MinusN(number))
      }}>-1</button>

인자로 넘겨줄 payload에  input에 value인 number를 넣어주면 인풋의 입력값이 payload에 들어가 제대로 기능을 한다. 

이때 

number: state.number + action.payload

가 문자열로 반환이 되어서 계속 쌓이게 되는데 이걸 숫자형으로 바꾼는 법은 두가지가 있는데 하나는 무식하게, 하나는 효율적이게 바꿀 수 있다. 

 우선 무식한 방법은 

number: state.number + Number(action.payload)

+연산자의 경우에만 문자열로 반환되니 +의 경우에만 payload를 숫자형으로 형변환해주는 방법이 있고 

효율적인 방법은 

setNumber(+event.target.value)

setNumber해주는 곳에 +를 붙이면 자동으로 숫자형으로 형변환이 되어 나온다.

 

payload는 단순하게 이해하자면 action의 type이 몇번 돌아갈지 명령하는 요소?

DUCKS

Ducks란 작업의 통일성을 위한 어느 한 패턴인데 몇개의 내용을 지켜서 모듈을 작성하는 것이다. 이미 counter에는 적용되어있는 사항들이다.

1. Reducer함수를 export default한다.

const counter = (state = initialState, action) => {
    console.log(state) 
    switch (action.type) {
        case PLUS_ONE:
            return {
                number: state.number +1
            };
        case MINUS_ONE:
            return {
                number: state.number -1
            }
        case PLUS_N:
            return {
                number: state.number + action.payload
            }
        case MINUS_N:
            return{
                number: state.number - action.payload
            }
        default:
            return state;
    }
}

export default counter;

2. action creator 함수들을 export한다.

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

export const MinusOne =()=>{
    return{
        type:MINUS_ONE,
    }
}
export const PLUSN=(payload)=>{
    return {
        type:PLUS_N,
        payload: payload
    }
}
export const MinusN=(payload)=>{
    return {
        type : MINUS_N,
        payload,
    }
}

3. action type은 app/reducer/ACTION_TYPE 형태로 작성한다.

 const PLUS_ONE = "counter/PLUS_ONE"
 const MINUS_ONE = "counter/MINUS_ONE"
 const PLUS_N = "counter/PLUS_N"
 const MINUS_N = "counter/MINUS_N"