Redux에 대해 간단한 요점 정리

Redux, Vuex 등 상태 관리 라이브러리의 필요성에 대한 내용은 굳이 정리 하지 않고, Redux의 구성요소와 Flow, 사용 패턴을 위주로 정리한다.

다만, ContextAPI라는 동일한 역할을 수행할 수 있는 내장 기능이 있음에도 불구하고 Redux라는 상태 관리 라이브러리를 별도로 사용하는 이유에 대해선 한번 정리하고자 한다.

 

---

Index

0. ContextAPI 대신 Redux가 필요한 이유

1. Redux의 4가지 구성 요소

2. DataFlow

3. Middleware

---

 

0. ContextAPI 대신 Redux가 필요한 이유

- 규모가 크지 않고 단순한 어플리케이션의 경우 ContextAPI로 전역 상태 관리를 개발 가능하긴 함.

- 상태 관리에 대한 구조화되고 예측가능한 코딩이 가능 (action, state, reducer, middleware 등 구조화된 구성요소)

- middleware를 통해 다양한 파생 로직을 redux 내에서 개발이 가능함 (로깅, 비동기 작업, 부가 로직 수행 등)

 

1. Redux의 4가지 구성 요소

1-1. Store

- 어플리케이션의 전역 상태를 가지고 있는 객체

- createStorer(Reducer) 함수를 (reducer를 파라미터로 넘겨)통해 생성

1-2. Reducer

- store의 state에 접근할 수 있는 순수 함수.

- store 내에서 여러 도메인 모듈을 state를 관리하는 경우 reducer 단위로 state와 reducer 함수를 한 묶음으로 정의해서 관리하게 됨.

- dispatch에 의해 전달받은 action에 따라 동작하며, action type, payload에 따라 기존 store의 state를 업데이트 한 값을 반환.

- reducer가 반환하는 state 값을 store state에 overwrite 하게 된다.

1-3. Action

- reducer에게 전달되는 store의 state 변경에 필요한 데이터 정의(type, payload) 객체

- type은 상수로 정의해서 관리한다.

1-4. Dispatch

- action을 reducer에 전달하여 store의 state 상태 변경을 발생 시킨다. 

 

2. DataFlow

2-1. UI 조작으로 인해 EventHandler를 통해 dispatch(Action) 함수를 (action을 파라미터로 넘겨)호출

2-2. store에서 reducer 함수가 실행되어 전달받은 action에 따라 새로 계산된 state 값을 overwrite

2-3. 업데이트된 store state에 따라 UI에 반영

3. Middleware

- action을 dispath 했을 때 reducer에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행(로깅, 액션 취소, 다른 액션을 발생 시키는 등의 작업 가능)

- 대표적인 미들웨어

  - redux-logger : 액션 정보를 콘솔에 출력해주는 미들웨어.
  - redux-thunk : 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다.
  - redux-saga : redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리. 특정 액션이 디스 패치 되었을 때 정

해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성하여 비동기 작업을 처할 수 있게 해준다.

- 비동기 작업은 middleware를 이용해야만 구현 가능한 것은 아님. 컴포넌트 단에서 connect() 함수를 통해 redux와 연결된 컴포넌트를 정의함으로 비동기 로직 & redux dispatch 로직 구현이 가능하긴 하다. (https://opendeveloper.tistory.com/entry/React-Redux-%EC%99%80-Context-API%EC%9D%98-%EB%B9%84%EA%B5%90-%EC%82%AC%EC%9A%A9-%EC%82%AC%EB%A1%80-%EB%B0%8F-%EC%BD%94%EB%93%9C-%EC%98%88%EC%8B%9C - User.js 참고(

하지만, 미들웨어를 통해 비동기 작업을 포함한 여러 파생 로직을 action과 함께 정의해서 사용하거나(redux-thunk), action에 따라 수행되야 할 미들웨어 로직을 구현하는 형태(redux-saga)로 코드를 구현 가능하다.

https://velog.io/@gyumin_2/React.js-redux-middleware%EB%A6%AC%EB%8D%95%EC%8A%A4-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-redux-thunk-redux-saga