다음과 같은 상황이라면 사용을 고려해볼만 합니다.
계속해서 바뀌는 상당한 양의 데이터가 있다
상태를 위한 단 하나의 근원이 필요하다
최상위 컴포넌트가 모든 상태를 가지고 있는 것은 더 이상 적절하지 않다
Redux란?
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 입니다.
이름 때문에 React에 종속되어 있는 라이브러리라고 생각했지만, 종속되어 있지 않다고 합니다. 자바스크립트의 어떤 앱에서도 사용이 가능합니다.
Redux is a pattern and library for managing and updating application state, using events called "actions".공식문서에는 다음과 같이 나와있습니다.
Redux is a pattern and library for managing and updating application state, using events called "actions".
(Redux는 "actions"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리입니다.)Redux에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 쉽게 이해할 수 있습니다.
Redux 설계
View에서 유저가 일으키는 행동에 맞게 Action 객체가 생성
=> Action은 Dispatcher를 통해 Reducer로 전달
=> Action의 type에 따라 Reducer 내에 미리 정해져 있던 로직이 Store를 변경
=> 변경된 Store의 내용이 View로 반영되는 패턴
Redux의 기본 개념 : 세 가지 원칙
1. Single source of truth
애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 자바스크립트 객체 트리로 저장됩니다.
2. State is read-only
상태를 수정하는 유일한 방법은 dispatch()에 Action 객체를 담아 호출하는 것 뿐입니다
상태를 업데이트 할 때는 불변성을 지켜야 합니다. 기존 값을 직접 변형시키는 것이 아니라 새로운 레퍼런스를 생성해서 덮어 쓰는 방식(ex. spread operator)으로 업데이트 해야 합니다.
3. Changes are made with pure functions
reducer 는 변화 이전 state와 Action 객체를 입력으로 받아 새로운 state를 만드는 순수 함수 입니다. 이 함수의 리턴 값이 store 가 됩니다.
fetch 등의 비동기 로직이나 new Date(), Math.random() 처럼 같은 입력이 주어지더라도 다른 응답을 리턴할 수 있는 값이나, 부수 효과가 존재하는 함수의 경우 redux와 함께 사용할 수 없습니다. 이러한 값들은 middleware 자리에서 처리해줘야 합니다.
출처
