Redux Toolkit
redux-toolkit은 redux가 공식적으로 만든 라이브러리다.
사용동기
- 리덕스 저장소 구성의 복잡함
- 리덕스를 아무런 라이브러리없이 작업을 수행하려면 많은 패키지를 추가해야했음
- 리덕스에는 너무 많은 상용구 코드가 필요함
위의 문제들을 해결하기 위해 리덕스 툴킷이 만들어졌다.
적용해보기
설치
# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkitcreateSlice()
리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아 해당 액션 생성자와 액션 유형으로 슬라이스 리듀서를 자동으로 생성한다.
-
기존의 리듀서에서 액션실행시키는 코드
switch, if문의 사용과 액션마다 type을 정해주는 게 번거로웠다.
-
createSlice() 이용했을 때 코드
action type을 하나하나 생성할 번거로움이 없어지고 코드가 더욱 단순해졌다.
객체형식으로 createSlice 값들을 넣어주는데, name은 사용자가 지정한 이름, initialState는 필수, reducers에서 이때까지 switch문과 if문으로 불렀던 함수를 넣어주면 된다.
configureStore()
리덕스가 업데이트되면서 createState를 사용시 실선이 그어져있고 redux/toolkit의 configureStore메서드를 사용할 것을 추천한다는 메세지를 볼 수있다. configureStore()는 자동으로 슬라이스 리듀서를 결합하고, 제공하는 모든 Redux 미들웨어를 추가하고, redux-thunk기본적으로 포함하고, Redux DevTools Extension을 사용할 수 있다. 즉, 따로 파일을 만들어 리듀서를 combine 시킬 필요가 없다는 것이다.
-
createState 사용시 선이 그어져있는 것을 볼 수있다.
-
configureStore()안에 리듀서들을 키값과 함께 넣어진것을 볼 수 있다. 그리고 이것을 store안에 넣고 export 해준다.
마무리
사실 리덕스라는 개념을 완전히 익히기도 전에 미들웨어부터 툴킷까지 배워서 아직 내가 이것을 실제 프로젝트에 적용할수있을지 의문이다. 그래도 강의 여러개를 찾아듣고 구글링해보면서 이해가 점점되는 것같다. 사실상 이전 코드를 새로 업데이트 버전으로 고칠때(기본셋팅)가 좀 복잡할뿐 사용하다보면 훨씬 편리할 것같다.
