elice track ep.14

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-toolkit

• 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을 사용하여 작성해야 정확한 타이핑이 가능