Redux Library

리덕스는 상태관리를 하기 위한 라이브러리이다.

앱의 상태 전부는 하나의 저장소(Store)안에 있는 객체 트리에 저장된다.

상태트리를 변경하는 유일한 방법은 어떤 행동이 일어날지에 해당하는 action이다.

• Store에 존재하는 state는 컴포넌트에서 수정하는 것이 아닌 리듀서를 사용해서 수정해야 함
• 리듀서를 통해 store의 state가 변경되면 컴포넌트는 재랜더링 된다.
  • 각 컴포넌트가 리듀서를 통해 store를 구독

action에 따라 상태를 어떻게 변경할지를 명시하기 위해 함수를 작성하고 이를 reducer 함수라고 한다.

<aside> 📌 **리덕스의 3가지 원칙

1. 스토어라는 하나뿐인 데이터 공간을 이용하기 때문에 신뢰할 수 있는 데이터이다.
2. 리덕스에서는 액션을 전달하는 리듀서 함수를 이용해서만 상태를 변경하며 직접 state를 변경하지 못한다.
3. 변경은 오직 순수 함수로만 가능하다. → 이 때문에 리듀서 사용**

</aside>

Redux는 이전에 사용한 useReducer와 사용하는 형태는 비슷한다.

• 둘 다 action 함수를 사용해서 state를 운반함

여기서 action이란 스토어에 운반 할 데이터를 말하며 주문서와 비슷한 개념이다.

action의 프로퍼티는 type과 payload가 존재하며 type은 필수값이며 payload는 선택값이다.

• 꼭 이 포멧은 아니어도 되지만 redux-actions에서는 고정이므로 해당 포맷을 지향하자

const {createStore} = Redux;

function counter(state = 0, action) {

   switch(action.type){
     case 'INCREMENT': 
        return state + 1;
     case 'DECREMENT': 
        return state - 1;
     default: 
        return state;
   }
}

const store = createStore(counter);

해당 함수(counter)는 action에 따라 state의 상태를 어떻게 변경할 지 정하는 Reducer 함수이다.

리듀서 함수에서 반환 되는 state는 store를 향해야 하고 그렇게 하기 위해서는 store를 생성하는 시점에서 해당 리듀서 함수를 등록해야 한다.

• 앱의 상태를 보관하는 리덕스 저장소라고 한다.
• 통상 store라고 하며 store가 제공하는 api는 subscribe, dispatch, getState가 있다.

dispatch 함수