createAction

김지환·2020년 8월 5일
0

Redux

목록 보기
3/5
post-thumbnail

Redux toolkits는 redux에서 공식적으로 지원하는 redux 개발 도구이다.

  • 리덕스 설정의 복잡성
  • 리덕스를 사용하기 위해 설치하는 패키지의 양
  • 작업 하나를 만들기 위해 필요한 보일러 플레이트가 너무 많은 문제

이와 같은 문제점들을 해결하기 위해서 사용한다.

기존 redux와 toolkit을 적용한 소스를 보며 비교하는 식의 글

createAction

  • redux
const add = "add"

const addToDo = () => {
  return {
    type: add,
    text
  }
}

const reducer = (state = [], action) => {
   switch(action.type){
      case addToDo:
        return [...state, {text: action.text, id: Date.now()}];
      default:
      	return state;
   }
}
  • redux toolkit
const addToDo = creactAction("add");

const reducer = (state = [], action) => {
   switch(action.type) {
      case addToDo.type:
        return [...state, {text: action.payload, id: Date.now()}];
      default:
      	return state;
   }
}

createAction 이라는 function으로 대체를 하였다.
함수 내에 지정한 string이 자동으로 type으로 지정이 된다.

기존에 return 할 값에서 action.text 에서 action.payload로 바뀐 건 createAction 은 type과 payload로 제공을 하기에 바뀌었다.

profile
주니어 프론트엔드 개발자

0개의 댓글