React-Redux (Redux Toolkit createReducer( ) 사용법 )

이전 시간은 createAction 을 사용하여 반복되는 코드와 전체적인 코드의 양을 줄이기위해

 

이전 보다는 새로운 방식인 createAction 을 사용하였습니다. 

하지만 Switch Case 와 default return 의 코드를 여전히 사용하였는데 , createReducer 를 사용하면

이또한 코드의 양을 최적화 할수있습니다.

 

다소 복잡하게 느낄수있기에 이전 코드들의 변화를 익히시고 사용하는것이 좋습니다.

모두다 같은 기능을 하기에 어떤 코드를 사용하여도 문제가 되진않지만 다만 더적은양으로 같은기능을 구현하기위해

도전 하길원한다면 사용해보시길..

 

(주석된 코드가 이전코드이며 그아래는 바뀐 코드입니다)

 

https://redux-toolkit.js.org/api/createreducer

createReducer | Redux Toolkit

(자세한 내용은 해당 링크로 들어가시면 됩니다)

 

 

createReducer 를 사용하면 기존코드보다 확실히 코드의 양에서도 차이가있지만,

제일 큰차이는 이전코드에서는 꼭 새로운 state 로 return 하였지만,

위 코드 addToDo  쪽을 보면 state.push ( )  로 데이터를 mutate 하게 할수있습니다

확실히 불변성을 지키기위해 ES6 spread 를 통해 copy 하여 새로운 state를 return 한 것과는 다르게 보입니다

하지만 Redux toolkit 과  immer( 자세히는 모르지만) 가 mutate 한 코드 를 우리가 보지못하는 내부에서 다시

예전같은 (   return [{ text: action.payload, id: Date.now() },...state]  ) 코드로 변환해서 실행해줍니다.

 

어렵게 느껴지는 문법때문에 사용자가 조금이라도 쉽게 사용할수 있게 편의 를 봐준 것으로 보입니다.

그렇다고 return 을 사용못하는것은 아니고,  아래 deleteToDo 쪽을보면 return 하는 코드가 적혀있는데,

 

이렇게 mutable 한 코드와 immutable 한 코드 2가지를 적절하게 사용할수 있게 되었습니다.

 

어려우면 편한거 쓰셔도 됩니다 .

 

확실한건 Redux Toolkit 사용 전과 후의  전체적인 코드의양이 40%정도  줄어든다는점. .  참고하시길..

 

 

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