Redux의 3원칙

🧐  Redux의 3원칙

 

React의 단방향 데이터 흐름                                                                                     Redux의 단방향 데이터 흐름

1.  Single source of truth (진실은 하나의 근원으로부터)

애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다.

 

애플리케이션의 모든 상태는 하나의 store에 저장되며, 이 store는 읽기 전용입니다. 즉, 애플리케이션의 상태를 변경하려면 반드시 action을 dispatch하여 store에서 처리해야 합니다. 이렇게 함으로써, 애플리케이션 전체에서 일관된 상태를 유지할 수 있습니다.

 

2.  State is read-only (상태는 읽기 전용)

상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다.

 

Redux에서는 상태(state)가 읽기 전용(read-only)이어야 합니다. 이는 Redux의 3원칙 중 하나인 "상태는 읽기 전용이다"라는 원칙으로, 액션에 의해서만 상태를 변경할 수 있습니다. 상태를 직접적으로 변경하는 것은 예측 불가능한 버그를 유발할 수 있기 때문에 Redux는 이를 금지하고 있습니다. 대신에 새로운 상태를 반환하는 리듀서를 작성하고, 액션을 디스패치하여 상태를 변경해야 합니다.
이렇게 하면 상태 변경의 흐름이 명확해져서 코드의 유지 보수성이 높아지며, 디버깅이 쉬워집니다.

3.  Changes are made with pure functions (변화는 순수 함수로 작성되어야한다)

액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야합니다.

 

리듀서는 이전 상태와 액션을 전달받아 새로운 상태를 반환하는 순수 함수(pure function)입니다. 순수 함수는 외부에서 전달받은 인자에만 의존하며, 상태를 변경하지 않습니다. 이렇게 함으로써, 동일한 인자에 대해 항상 동일한 결과를 반환하므로, 애플리케이션의 상태를 예측 가능한 방식으로 업데이트할 수 있습니다.

 

순수 함수(pure function)란 같은 인자에 대해 항상 같은 값을 반환하며, 함수 외부의 어떤 상태도 변경하지 않는 함수를 의미합니다. 순수 함수는 입력값에만 의존하고 부작용(side effect)이 없어서 코드의 가독성을 높이고 테스트와 디버깅을 쉽게 해주며, 코드의 예측 가능성을 높입니다.

즉, 순수 함수는 입력값에만 의존하며 부작용이 없는 함수로, 코드의 가독성과 예측 가능성을 높이며 테스트와 디버깅을 쉽게 합니다.

 

예를들어)

// 순수 함수
function add(a, b) {
  return a + b;
}

// 외부의 상태를 변경하는 함수는 순수 함수가 아닙니다.
let counter = 0;
function increment() {
  counter++;
}

 

---

참고

https://redux.js.org/understanding/thinking-in-redux/three-principles

Three Principles | Redux