React-Redux (Redux Toolkit createAction 사용법)

redux 를 사용하려면 기본적으로 reducer 를 만들고 type을 지정해주는데,

확실히 redux 의 장점도 많지만 단점이라면 코드의 양을 지적하는 사용자들의 불만을 빼놓을수없다.

 

코드의 양을 최적화 하기위해 redux 에서 보안하기위해 추천하는 createAction  에 대하여 알아보겠다.

 

createAction 을 사용하기전과 사용후의 코드 변화를 살펴보겠다.

 

 

 

(주석처리 한 부분이 이전 코드)

 

같은기능을 하는데 반복적인 코드를 줄이고 전체적인  코드의 양이 확줄게 된 것을 확인 할수있다

 

 

reducer 도 아래와같이 바꿔준다.

(이전 코드)

바로 위 코드를 보면  switch case  문에 ADD type 부분과 dispatch로 넘어온 action.text 가   

(이후 코드)

createAction 을 통해 만들어준  addToDo , deleteToDo 에  .type 을 통해 대체 하였고 ,

action.text 는 action.payload 로 바뀌었다 .

payload 는 전 포스팅에 서 말씀드린것처럼 dispatch 로 데이터를 담아서 보내는 그릇 이라고생각하면된다

(action 으로 어떤 데이터를 보내면 payload 안으로 들어온다)

console.log( action ) 을  해보면 이렇게 action 에는 type 과 payload 를 확인할수있다.

전송된 데이터가 action.text 도맞고 action.payload 도 맞지만 action.payload로 바꿔주지않으면

error 없이 화면에 제대로 표시가 안될수있기에  creatAction 으로 리팩토링 해줄때는 같이 바꿔준다고 생각하자.

 

 

--잘못된 부분이 있다면 댓글 부탁드립니다--