Redux

본 포스트는 Redux-Toolkit-tutorial을 기반으로 만들어졌습니다.

Redux

---

Redux란?

• JS 앱들을 위한 예측 가능한 상태 저장소이다.
• React 전용이 아니라 Vue나 Angular와 같은 프레임워크에서도 사용이 가능하다.
• Redux는 상태를 저장하고 각 애플리케이션의 상태를 관리한다.
• Redux는 예측이 가능하다.
  • ex) todo list app - item(pending) → item(completed)
  • redux에선 모든 상태 변화가 반드시 명시적이어야 하며 추적할 수 있어야 한다.
  • 따라서 상태 변화의 결과가 예측이 가능해진다.
• 하지만 다소 복잡하다.

Redux Toolkit이란?

• 효율적인 redux 개발을 위한 toolset이다.
• redux toolkit은 redux의 요약본 같은 기능을 해줌으로서 어려운 부분들을 감춰주고 좋은 개발 경험을 향상시킬 수 있도록 도와준다.

React-Redux

• React-Redux는 React를 위한 공식 Redux UI Binding 라이브러리이다.

Redux의 3가지 핵심 개념

• Store : 상태를 저장한다.
• Action : 행동을 정의한다.
• Reducer : store와 action을 묶어준다.

Redux의 3가지 원칙

---

1. 전역 상태는 하나의 store에 object 형태로 저장된다.
2. 상태를 변경하는 방법은 action을 dispatch하는 것 뿐이다.
3. reducer는 순수해야 한다.

Actions

---

• store와 상호작용 할 수 있는 유일한 방법이다.
• 애플리케이션에서 store로 전달하는 정보를 가질 수 있다.
• JSON 형식이다.
• 애플리케이션에서 발생하는 동작을 분류하기 위해 type이라는 속성을 가지고 있다.
• type 속성은 보통 문자열 상수로 정의된다.

Synchronous Action

• action이 dispatch되자마자 state가 변경됨.

Asynchronous Action

end point로부터 데이터를 가져오기 위해 비동기 API를 호출하고 가져온 데이터를 애플리케이션에서 쓴다.

user list를 가져온다고 가정하고 state, Actions, Reducer는 어떻게 될 지 생각해본다.

State

state = {
    loading: true,
    data: [],
    error: '',
}

• loading : 로딩 중인 상태를 나타냄
• data : 서버로부터 fetch받은 데이터(user list)
• error : 에러

Actions

• FETCH_USERS_REQUESTED
• FETCH_USERS_SUCCEEDED
• FETCH_USERS_FAILED

Reducers

case FETCH_USERS_REQUESTED:
    loading: true
case FETCH_USERS_SUCCEEDED:
    loading: false
    users: data( from API )
case FETCH_USERS_FAILED:
    loading: false
    error: error ( from API )

Reducers

---

• store로 보내진 action에 따라 애플리케이션의 상태가 어떻게 변화하는지를 명시한 것이다.
• state와 action을 인자로 받아서 다음 상태를 돌려주는 함수이다.
• (previousState, action) => newState

Store

---

• 전체 애플리케이션을 위한 저장소
• 애플리케이션의 상태를 가짐
• getState() 함수를 사용하여 상태를 읽을 수 있음
• dispatch(action)을 통하여 상태를 변경할 수 있음.
• subscribe(listener)을 통하여 listeners를 등록할 수 있음
• subscribe(listener)의 반환 함수를 이용하여 등록 해제할 수 있음.

Redux 기본 함수들

---

createStore

• createStore
• 저장소를 생성한다.

bindActionCreators

• bindActionCreators
• action들을 하나로 묶어서 메소드 형태로 사용할 수 있게 해준다.

combineReducers

• combineReducers
• reducer들을 하나로 묶어주는 함수
• 관리해야할 상태가 여러 개라면 여러 개의 파일에 reducer를 정의하고 combineReducers를 이용하여 하나로 묶으면 관리하기도 쉽고 유지보수 하기도 쉬워진다.

Immer

---

• immer
• produce 함수를 이용하여 nested 된 상태의 값을 한 번에 변경할 수 있게 해주는 라이브러리이다.

Middleware

---

• 사용자 정의 기능을 이용하여 redux를 확장하는 방법이다.
• action을 dispatch하는 순간과 state가 reducer에 도달하는 순간 사이에서 확장 기능을 제공해준다. 그래서 미들웨어라고 불린다.
• ex) logging, crash reporting, performing asynchronous tasks

redux-logger

• redux-logger
• 상태가 변경될 때 마다 이전 상태는 무엇이고 action은 무엇이고 다음 상태는 무엇인지 알려준다.

Async action creators

• axios : API end point로 요청을 보내는 라이브러리
• redux-thunk : redux에서 사용하는 표쥰 async action creator 라이브러리

Redux Toolkit

---

Redux의 문제점

• Redux는 중복되는 코드를 많이 정의해야 한다.
  • Initial State
  • Action type
  • Action creator
  • Reducer
• 다른 많은 툴들을 설치해야 한다.
  • Redux-thunk
  • Immer
  • Redux-devtools
• 이런 이유로 대규모 프로젝트에서는 절대 Redux 홀로 쓰지 않는다.

Redux toolkit

• redux toolkit은 redux에서 공식적으로 제공하는 툴셋이다.
• setup process를 간소화
• 흔한 사용 케이스를 처리
• 유용한 유틸리티들을 포함
• redux를 사용하는데 있어서 편의기능을 제공하여 개발자들이 그들의 애플리케이션 기능 개발에 더욱 집중할 수 있도록 도와준다.

Redux-toolkit 기본 함수들

createSlice

• createSlice
• 상태 관리에 필요한 state, actions, reducer를 한 번에 만들어주는 함수

configureStore

• configureStore
• 여러 개의 reducer들을 하나로 묶어주는 함수

createAsyncThunk

• createAsyncThunk
• return 받은 promise 객체의 상태(pending, fulfilled, rejected)에 따른 action을 자동으로 dispatch 해준다.

React-Redux

---

react 전용 redux 툴을 사용하여 vanilla JS에서 했던 프로젝트들을 react로 만들어 본다.

react-redux 전용 훅

useSelector

• useSelector
• Redux store에 configureStore로 저장되어 있는 reducer 중에서 원하는 값을 골라서 가져온다.

useDispatch

• useDispatch
• Redux store에서 dispatch함수를 가져온다.

redux-devtools

---

크롬에서 확장 프로그램을 다운로드 받아서 디버깅할 때 유용하게 사용할 수 있다.