Redux - 상태 관리 라이브러리

 

Redux란?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.

 

Redux를 사용할 경우 다음과 같은 이점이 있다.

• 일관적으로 동작하고, 서로 다른 환경(클라이언트, 서버, 네이티브)에서도 실행되며, 테스트하기 쉬운 앱을 작성하도록 도와준다.
• 실행 취소, 다시 실행, 영속적인 상태 등을 가능하게 한다.
• DevTools를 이용할 경우 앱의 상태를 바로바로 확인할 수 있다. Redux의 아키텍처를 통해 변경사항을 기록하고, 시간여행형 디버깅을 사용하고, 완전한 에러 리포트를 서버로 보낼 수 있다.
• 어떤 UI 레이어에서도 동작하며 거대한 애드온 생태계를 가지고 있다.

 

Redux 핵심 용어 정리

State

state는 Redux API에서는 보통 저장소에 의해 관리되고 getState()에 의해 반환되는 하나의 state값을 지칭한다.

state는 Redux 애플리케이션의 전체 state를 나타내며, 보통 깊게 중첩되어 있는 객체이다.

 

Action

action은 상태를 변화시키려는 의도를 표현하는 평범한 객체이다.

action은 저장소에 데이터를 넣는 유일한 방법이며 UI 이벤트에서 왔든, 네트워크 콜백에서 왔든, 웹소켓과 같은 다른 소스에서 왔든 모든 데이터는 action으로써 보내진다.

action은 어떤 형태의 action이 행해질지 표시하는 type 필드를 가져야 한다.

 

Reducer

reducer는 누적값과 값을 받아서 새로운 누적값을 반환하는 함수이다.

이들은 값들의 컬렉션을 받아서 하나의 값으로 줄이는데 사용된다.

Redux에서 누적값은 state 객체이고, 누적될 값은 action이다.

reducer는 주어진 이전 state와 action에서 새로운 state를 계산한다. 이들은 반드시 같은 입력이 있으면 같은 출력을 반환하는 순수 함수여야 한다.

 

Dispatch

dispatch는 action이나 비동기 action을 받는 함수이다.

받은 다음 하나나 여러개의 action을 저장소에 보낼수도 보내지 않을수도 있다.

 

 

Redux 설치

redux를 사용하기 위해서는 redux, react-redux, redux-promise, redux-thunk를 설치해야 한다.

redux의 설치는 다음 명령어를 통해 가능하다.

 

npm install redux --save
npm install react-redux --save
npm install redux-promise --save
npm install redux-thunk --save

// or

npm install redux react-redux redux-promise redux-thunk --save

 

 

redux에 대한 자세한 설명은 다음 페이지에서 확인할 수 있다.

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux