TIL 23.07.31 Redux thunk/ toolkit 개념정리

Redux thunk

 

Redux thunk 는 리덕스에서 비동기 작업을 하기 위한 미들웨어 중 하나로, Redux thunk 를 사용하면, 액션 생성자 함수가 일반 객체뿐만 아니라 함수도 반환할 수 있다.

 

Thunk의 장점

 

1. 비동기 작업 처리

Redux 는 동기적인 상태관리 라이브러리이므로, 액션은 순수한 객체 형태를 지닌다. 그러나 서버로부터 데이터를 가져오거나, API를 호출하는 비동기 작업은 리덕스에서 바로 처리가 불가능하다. 따라서 Redux Thunk를 사용하면 비동기 작업을 보다 쉽게  처리가 가능하다.

 

2. 분리된 비동기 로직

 

비동기 작업을 컴포넌트에서 직접 처리하면, 해당 컴포넌트가 너무 많은 역할을 하게 된다. 따라서 Redux Thunk를 이용해 비동기 로직을 액션 생성자 함수와 분리하여 관리할 수 있음. 이는 유지보수 및 코드의 재사용을 유리하게 함.

 

3. 상태 업데이트 관리

 

상태 업데이트 관리

 

Redux Thunk를 사용하면 비동기 작업의 시작, 성공, 실패 등 여러 상태를 관리할 수 있음. 

 

---

Redux Toolkit

 

Redux Toolkit 은 리덕스를 더 쉽고 효율적으로 사용하기 위해 개발된 도구로, 보일러 플레이트를 줄이고 코드의 가독성 및 유지보수를 향상시킴.

 

Redux Toolkit 의 제공 기능

 

1. configureStore()

Redux 스토어를 생성하는 유틸리티 함수로, Redux 스토어 설정을 간단하게 함.

 

2. createSlice()

리듀서와 액션 생성자 함수를 함께 정의하는데 사용되는 유틸리티. 코드 중복을 줄이고 가독성을 높인다.

 

3. createAsyncThunk

비동기 작업을 처리하는 액션 생성자 함수를 생성하는데 사용되는 유틸리티 함수. 비동기 작업의 시작, 성공, 실패에 따른 여러 액션을 자동으로 생성해줌.

 

Redux Toolkit 장점

 

1. 간결한 코드 

보일러 플레이트 최소화 및 createSlice, createAsyncThunk 사용

 

2. 쉬운 비동기작업 관리

createAsyncThunk 를 사용하여 비동기 작업 관리

 

3. 직관적인 상태관리

createSlice 를 사용하여 상태 정의 

 

4. 불변성 유지 

이머가 내장되어있어 불변성 유지하는 방식으로 업데이트. push 메서드 사용 가능 

 

5. 미들웨어 내장 지원

Redux Saga, Redux Observable 등의 미들웨어 내장

 

6. DevTools 통합

개발자 도구(Dev Tools) 와 통합되어 디버깅 용이.

 

7. 유지보수성 향상

코드의 가독성과 유지보수성을 높여줌. 

---