⭐Redux란

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로, 예측 가능하고 일관된 방식으로 애플리케이션 상태를 관리하는 데 사용됩니다. Redux는 React와 함께 주로 사용되지만, 다른 JavaScript 프레임워크와도 호환됩니다.
Redux의 핵심 개념은 단일 소스(Single Source of Truth) 원칙과 상태 변경을 위한 불변성(Immutability)입니다. Redux는 애플리케이션의 상태를 단일 JavaScript 객체인 '스토어(Store)'에 저장합니다. 이 스토어는 읽기 전용으로 관리되며, 상태를 변경하기 위해서는 '액션(Action)'이라고 불리는 특정 이벤트를 디스패치(dispatch)해야 합니다.
액션은 상태 변경을 위한 정보를 포함하고, 리듀서(Reducer)라고 불리는 순수 함수에 의해 처리됩니다. 리듀서는 현재 상태와 액션을 기반으로 새로운 상태를 계산하고 반환합니다. 이때, 상태 변경은 불변성을 유지하며 이루어지므로, 기존의 상태 객체를 직접 수정하지 않고 새로운 상태 객체를 생성합니다.
-chatGPT

redux를 이용하면 하위 컴포넌트의 정보를 수정하기 위해서 상위 컴포넌트에서 정보를 수정하고 또 보라색 컴포넌트에서 반대편 트리에 있는 값들을 바꾸기 위에 root까지 가야하는 불필요한 작업을 줄일 수 있다.

위 그림은 Redux의 데이터의 흐름에서 보여주는 그림이다. Redux에서의 데이터는 한 방향으로만 흐르며 특정 component가 action을 발생하면 해당 action이 reducer에게 전달되며 reducer에 의해서만 redux store은 갱신된다.

redux는 상태 변경을 감지하면 store을 구독(subscribe)하고 있는 컴포넌트에게 알리는 방식으로 동작한다.

⭐Redux의 요소

🪐Action

action은 간단한 JS 객체이다. 우리가 수행하는 작업의 유형을 지정하는 'type'속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는데 사용되는 payload의 속성을 가질 수도 있다.

🪐Reducer

reducer는 App 상태의 변경 사항을 결정하고 update된 상태를 반환하는 함수이다.

2개의 인자를 받는데 첫번째 인자로는 이전의 state를 그리고 2번째 인자로는 action Object를 받고 next state를 반환한다.

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };

🪐Redux Store

이 모든 것들을 하나로 모으는 redux store는 app의 전체 상태 트리를 보유한다. 내부 상태를 변경하는 유일한 방법은 action을 전달하는 것이다. redux store는 class가 아니며 몇 가지 method가 있는 객체이다.