Redux - ReduxToolkit

Doodream·2021년 12월 6일
0

Redux

목록 보기
4/4
post-thumbnail

ReduxToolkit

리덕스 툴킷 공식 페이지

리덕스 툴킷은 기존의 리덕스 사용방식을 좀더 편리하게 해주기위한 라이브러리 입니다.
예를 들면 리듀서의 가독성을 높여주거나 state의 관리를 간편하게 해줍니다.

npm install @reduxjs/toolkit react-redux
따로 redux를 설치하지 않아도 됩니다. 해당 기능을 리덕스 툴킷이 전부 가지고 있습니다.

하나씩 기능을 알아봅시다.

createSlice()



리덕스 툴킷 방식의 리듀서 작성입니다.
리듀서 길이가 압도적으로 작아졌습니다. 타입에 따른 함수구분을 직접 프로퍼티 함수를 추가해서 구성하고 그안에 첫번째 인수로 state, 두번째 인수로 action 객체를 받습니다.

그런데 state는 객체라 불변성인데 지금 기존의 객체를 수정하는 코드를 보이고 있습니다.
괜찮습니다. 간결성을 위해서 내부적으로는 새로운 객체의 state를 반영하는 라이브러리 입니다. 코드의 형태만 기존의 state를 수정하는 것 처럼 보일 뿐입니다. 실제로 내부에서는 새로운 객체를 반영하고 있습니다.

이과정은 immer 라고 불리우는 타사의 라이브러리가 사용됩니다.

또한 state의 일부분을 주제별로 나눠서 여러 slice로 관리할 수 있습니다. 여러 slice를 생성함으로서 리듀서를 여러개를 만들어 관리해서 유지관리를 편리하게 할수 있습니다.

보다시피 counterSlice에 action 프로퍼티에 reducer로 지정해놨던 함수들이 들어있습니다. 이렇게 action type을 상수로 빼서 관리하지 않아도 명시적으로 표현되어있습니다.

configureStore()



기본적으로 createStore와 같은 역할을 하지만 해당 함수는 하나의 통합 리듀서를 전달받기를 원합니다. 하지만 configureStore는 다양하게 나뉜 리듀서들을 각각 받아 전달 할수 있습니다. 이렇게 store에 해당 리듀서를 전달합니다.
이렇게 하면 store에서 state가 각각의 주제별로 객체로서 구성 되어집니다. 따라서 useSelector로 일부의 state를 추출할때도 변경 이 필요합니다.

하지만 현재는 하나의 리듀서만을 사용하므로 위와 같의 정의합니다.

이제 위에서 봤다시피 action 객체를 이용해서 slice 안에 들어있던 action 객체의 함수들로 dispatch를 해봅시다.


위와 같이 dispatch() 안에 해당 액션 객체를 호출해서 메소드를 실행시키면 리듀서에
{type: "UNIQUE_IDENTIFIER, payload: [인수]} 이런식으로 전달해줍니다.

실제로 slice안에 action.amount 라고 접근했던 부분은 payload로 접근해야합니다.
payload라는 이름은 바꿀수가 없습니다. 라이브러리의 프로퍼티 입니다.
이렇게 기존의 리덕스를 리덕스 툴킷을 이용해서 다시 재구성했습니다.

다양한 주제에 대한 Slice 적용하기

각각의 주제에 대한 slice를 기본으로 파일을 만들어 리듀서를 관리한다면 관심사를 나눠서 관리할 수 있습니다.

각각의 파일에는 slice가 들어가므로 파생되는 action 객체도 나뉘게 됩니다.

profile
일상을 기록하는 삶을 사는 개발자 ✒️ #front_end 💻

0개의 댓글