Redux
Redux 소개
- 앱 전체 상태를 쉽게 관리하기 위한 라이브러리
- Redux의 많은 개념들이 Flux pattern에서 차용됨
- 주로 react 앱과 같이 사용
- redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 redux를 활용한 앱 구축 사례가 많음
언제 Redux를 써야 하는가
- 앱 전체의 상태 관리가 필요할 때
- 복잡한 비동기 처리가 있는 상태 관리가 필요할 때
- 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때
- 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때
- logger, devtool 등을 활용하여 상태를 관리할 필요가 있을 때
핵심 원칙
- Single source of truth - Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관됨
- Immutability - 상태는 오로지 읽을 수만 있다. 변경하려면 모든 상태가 변경되어야 함
- Pure function - 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 함
Action
const action1 = {
type: 'namespace/getMyData',
payload : {
id: 123
}
}
- Action은 상태의 변경을 나타내는 개념
- 어떤 형태든지 상관없으나, 주로 type, payload를 포함하는 javascript 객체
Action Creator
const addObj = (id) => ({
type: 'namespace/getMyData',
payload: {
id: String(id).slice(1)
}
})
- Action을 생성하는 함수
- 직접 Action을 생성하는 것보다 Action Creator 를 활용하면 재사용성이 좋고 하나의 레이어를 추가할 수 있음
Store
const store =
createStore(reducer,
initialState)
- 앱 전체의 상태를 보관하는 곳
- Action에 따라 reducer에서는 새로운 상태를 만들어내며, Store는 그 상태를 저장
- Store의 상태는 불변하며, 매 액션이 발생할 때마다 새로운 객체가 만들어짐
Redux의 구조
- redux는 자유롭게 확장하여 사용할 수 있음
- 내부적으로는 action과 데이터가 어떻게 흐르는지 이해하고,
middleware, enhancer 등을 이용하여 redux를 확장함
middleware
- action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달
- redux-thunk, redux-logger 등의 라이브러리를 적용
enhancer
- action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달
- redux devtools 등의 라이브러리를 적용
- redux에서 공식적으로 추천하는, helper 라이브러리
- 기존에 만들어야 하는 수많은 보일러 플레이트를 제거하고,
유용한 라이브러리를 포함하여 redux 코드를 쉽게 작성하게 함
- redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함됨
react-redux
- redux를 react 앱에 연결하게 하는 라이브러리
- redux에서 관리하는 상태, dispatch 함수 등을 가져올 수 있음
- 클래스 컴포넌트, 함수형 컴포넌트에 모두 연결할 수 있음
react-redux API - Provider
- Redux store를 React와 연결하기 위해서는 반드시 Provider로 컴포넌트를 감싸야만 함
- Provider 안에서 렌더링된 컴포넌트들은 state에 접근할 수 있음
redux를 이용한 비동기 처리
- redux 비동기 처리를 위해서는 비동기를 위한 middleware를 추가하여야 함
- redux-thunk는 Promise를 이용한 비동기 Action을 쉽게 처리하도록 하는 middleware
createAsyncThunk
- redux-toolkit에서는 thunk middleware를 디폴트로 추가
- redux-toolkit은 createAsyncThunk API를 제공함
fulfilled, rejected, pending 3가지 상태에 대해 각각 reducer를 작성
- TypeScript 환경에서 reducer 작성 시, builder callback을 사용하여 작성해야 정확한 타이핑이 가능