Redux - (action Creator,action value)

1.Action Creator

Action Creator 란?

액션 객체를 만드는 함수

아래 작성된 코드를 보면 action의 객체인 type 과 payload를 반환하고있습니다. 이러한 형태를 action Creator 라고한다.

사용하는 이유는 휴먼에러를 줄이고 수정이 쉽게하기위해서입니다.

// action creator
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 minuN = (payload) => {
 return {
   type: MINUS_N,
   payload: payload,
 };
};

Action value 란?

action 객체가 가지고있는 type을 상수로 변환해서 휴먼에러를 줄이기위한 방식

아래 코드에서 reducer에서 switch문이 case를 type으로 비교한다고 할때 상수로 명으로 변경해서 사용하는 방식이다.

// action value 휴먼에러를 줄이기위한 장치
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";
const PLUS_N = "PLUS_N";
const MINUS_N = "MINUS_N";


const counter = (state = initialState, action) => {
 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;
 }
};

이러한 방식으로 리팩토링 해서 휴먼에러를 줄이며 보다 수정하기 쉽게 변경하는 방식에 사용되는 방법 두가지입니다.