Redux 발톱 담구기

• 앱의 상태는 하나의 저장소(store)안의 객체 트리에 저장된다.
• 저장소(store)를 변경하기 위해서는 액션(action)객체를 보내야 한다.
• 액션(action)이 저장소(store)를 어떻게 변경해야할지 명시하기 위해서는 리듀서(reducers)를 작성하면 된다.

장점

• action에 따른 모든 변경을 추적할 수 있다.
  - 세션을 기록해서 action 하나하나를 다시 실행해볼 수 있다.
• 프로그램에서 사용되어야 하는 상태에 대한 중앙 집중식 저장소 역할을 하며, 예측 가능한 방식으로만 상태를 업데이트할 수 있도록 하는 규칙을 제공

redux를 언제 사용해야 할까요?

• 누군가 사용했다는 이유만으로 redux를 사용하지 마라. 시간을 들여서 얻는 잠재적인 이점과 그에 따르는 단점이 있다.
• 그렇다면 언제 사용해야 하는 것이 좋을까?
  - 계속 바뀌는 상당한 양의 데이터가 있다.
  • 상태를 위한 단 하나의 근원이 필요하다.
  • 최상위 컴포넌트가 모든 상태를 가지고 있는 것이 더 이상 적절하지 않다.
• 동일한 state를 공유하고 사용해야 하는 component가 여러 개 있고, component가 해당 프로젝트에서 서로 다른 부분에 있다면, 단순성이 저하될 수 있다. 이것을 state를 부모 요소로 끌어올림으로써 해결할 수도 있지만, 이것은 항상 도움이 되는 것은 아니다. 이를 해결하기 위한 또 한가지 방법으로는 component에서 공유되는 상태를 추출해서 component 트리 외부의 중앙 위치에 놓는 것이다. (위치에 상관없이 상태에 접근하고, action을 trigger할 수 있다.)
  

개념 ✨

store : redux 저장소

• API로는 subscribe, dispatch, getState가 있다.

const store = createStore(counter)
// store : redux 저장소 

store.subscribe(() => console.log(store.getState())))
// subscribe : 상태변화에 따라 UI가 변경되게 설정
// subscribe를 직접 사용하기보다는 뷰 바인딩 라이브러리(ex/ react-redux)를 사용한다.

store.dispatch({ type: 'INCREMENT' })
// dispatch : store를 변경하기 위해 action을 dispatch 인자로 넘겨준다. 
// action : 변경을 명시 

• reducer를 전달하여 생성된다.
• 현재 상태 값을 반환하는 getState 메서드가 존재한다.

reducer

• 상태를 어떻게 변경할지 경정하는 함수
• 앱이 커짐에 따라 루트 reducer를 개별적으로 동작하는 작은 reducer들로 나눌 수 있다. (컴포넌트를 쪼개는 것과 동일)
• 현재 state와 action을 수신하고 필요한 경우 state를 업데이트하는 방법을 결정하고 새로운 상태를 반환하는 함수이다.
• 이벤트를 처리하는 이벤트 수신기로 생각될 수 있다.

규칙

• state, action 인수 기반으로 새 상태값만 계산해야한다.
• 기존 상태를 수정할 수 없다. 변경하려면 기존 상태를 복사하고 복사된 값을 변경하여 불변 업데이트를 수행해야 한다.
• 비동기 로직, 랜덤값으로 side effect를 발생시키면 안된다.
• 해당 action을 care하는지 확인하고, 그렇다면 새 값을 반환한다. 그렇지 않다면 변경되지 않은 기존 상태를 반환하면 된다. (switch문에서 default값)

action

• 일반 js 객체
• 프로그램에서 발생한 일을 설명하는 이벤트
• domain/eventName의 형식 (작업이 속한 기능 혹은 범주/발생한 특정 작업)
• action에는 추가 정보가 있는 다른 필드가 있을 수 있다. 이를 관례에 따라 payload라고 한다.

action creator

• action 객체를 만들고 반환하는 함수
• action creator를 사용해서 매번 손으로 action 객체를 만들어 줄 필요가 없다.

dispatch

• 상태를 업데이트하는 유일한 방법
  - dispatch를 호출하고, action 객체를 전달한다.

왜 react-redux를 사용할까요?

• redux 자체는 react, vue, angular 등과 함께 사용할 수 있는 독립형 라이브러리이다.
• 일반적으로 어떤 프레임워크를 사용하든 직접 store와 상호 작용하기보다는 redux를 UI 프레임워크와 함께 묶는다.
• react-redux는 react 공식 UI 바인딩 라이브러리이다. redux를 react에서 사용할 경우 react-redux를 통해 두 라이브러리를 바인딩해야한다.
• react-redux없이 react에서 redux를 사용하려면, 저장소를 생성하고, 업데이트를 구독하고, 현재 스토어의 상태에서 필요한 데이터만 추출해 UI를 업데이트 해주어야한다. 이 과정은 반복적인 일이 된다. react-redux는 스토어 상호작용 로직을 처리하기 때문에 직접 코드를 작성할 필요가 없어진다.

1. 스토어가 생성되면 <Provider>로 감싼 후, store를 전달해 component에서 사용할 수 있다.
2. react-redux의 hooks를 사용해 react component가 redux의 store와 상호작용할 수 있다.
   • useSelector로 store에서 데이터를 읽고 useDispatch를 사용하여 action을 dispatch할 수 있다.

참고

• Redux docs