Redux

Redux

Redux는 react 라이브러리 생태계에서 많이 사용되는 상태관리 라이브러리 이다.
컴포넌트의 상태관리 로직들을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있으며, 글로벌 상태관리도 쉽다.
프로젝트의 진행에 있어 redux가 많은 도움이 되기는 하지만, 꼭 모든 프로젝트에 필요한 것은 아니다.
단순히 글로벌 상태를 관리하기 위한 것이나, 글로벌 상태가 별로 없다면 ContextAPI를 활용해도 충분하다.

ContextAPI와 useReducer를 사용해 관리 하는 것과 다른 점은

1. 미들웨어를 통한 비동기작업을 체계적으로 관리할 수 있다.
2. 유용한 함수와 Hooks를 지원.(connect, useSelector, useDispatch, useStore...)
3. 기본적인 상태의 최적화가 이루어 져있다.(필요한 상태가 바뀔때만 리렌더링 된다...)

Keyword

---

1. Action
   상태의 변화가 필요할 때 Action이라는 것을 발생 시킨다.
   Action이라는 객체는 { type: 'INCREMENT' } type을 보고 상태를 어떻게 업데이트 할지 결정.

---

2. Action 생성 함수
   파라미터를 받아와 Action 객체를 만들어 주는 함수이다.

function Increase(num) {
  return {
    type: 'INCREMENT',
    num
  }
}

---

3. Reducer (상태를 바꿔주는 함수)
   useReducer랑 비슷하다.

function counter(state, action){
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
// Redux 에서는 default값으로 state를 반환해 줘야 한다.  

---

4. Store
   한 application당 하나의 store를 만들게 된다. 안에는 상태와 reducer 몇가지 내장함수가 들어있다.

---

5. dispatch
   위 4번의 내장 함수중 한개이고, Action을 발생시켜 store에 전달한다 라고 이해하면 편하다.

---

6. subscribe
   위 4번의 내장 함수중 한개이고, subscribe를 호출할 때 파라미터로 특정 함수를 넣어 주면 Action이 dispatch 될 때 마다 호출된다.(store의 상태가 업데이트 될 때 마다 호출 한다.)
   컴포넌트를 만들게 되면 redux에 구독을 하게 되고, redux의 상태가 업데이트 되면 컴포넌트도 리랜더링 된다.

---

규칙

---

1. 하나의 애플리케이션에는 하나의 스토어가 있다.
   만들 수는 있으나 권장하지 않으며, 개발자 도구를 제대로 활용하지 못한다.

---

2. 상태는 읽기전용
   리엑트의 상태와 같이 불변성을 지켜 줘야 하며, 불변성을 지켜 줘야만 컴포넌트들이 제대로 리랜더링 된다.

---

3. 변화를 일으키는 함수 Reducer는 순수한 함수여야 한다.
   Reducer는 이전 상태와 액션객체를 파라미터로 받는데, 이전의 상태를 변경하지 않고 새로운 상태 객체를 만들어 반환해야 한다. 또한, 똑같은 파라미터로 호출된 reducer 함수는 언제나 똑같은 결과값을 반환해야만 한다. (new Date(), Math.random(), axios.get() 과 같은 함수 사용 ❌)

---

Redux를 사용하기 전 간단한 규칙과 용어 등을 알아 보았다. 천천히 읽어 보며 익숙해 지도록 해야겠다.