[Redux] 공식문서로 살펴보는 Redux

Redux 란?

여러 컴포넌트를 거쳐 / 앱 전체에서 사용되는 데이터 (상태) 를 단일한 저장소에서 관리할 수 있는 전역 상태 관리 라이브러리

왜 Redux가 필요할까?

리덕스를 사용하지 않는다면, parent component에 있는 데이터를 inner child에 넘겨주기 위해 child component 에도 넘겨줘야 됨
컴포넌트간 의존성 ⬆, 데이터 유지보수가 복잡해짐  🤯

🥊 Context API vs. Redux

Context API

📎 React 내부에서 자체적으로 제공
📎 "전달" 과 "공유" 에 집중 → 여전히 useState, useReducer를 통해 상태 관리
📎 작은 프로젝트에 적합

Redux

📎 외부 라이브러리 → React가 아닌 다른 도구에서도 사용 가능
📎 "상태 관리" 에 집중 → store에서 상태를 저장, 업데이트
📎 큰 프로젝트에 적합

---

Redux의 구성요소

🏰 Redux의 flow

1. state와 action 을 정의
2. action에 따라 state를 어떻게 조작할지에 대한 실질적인 비즈니스 로직을 reducer 에 정의
3. reducer에 의해 변경된 state를 컴포넌트가 store 에서 읽어옴

🧱 Store

애플리케이션의 global state를 담고 있는 단일 중앙 저장소

global state
📍 애플리케이션의 여러 컴포넌트가 해당 데이터에 대해 신경써야 하는가
📍 해당 데이터로부터 파생된 데이터를 생성할 필요가 있는가

🧱 Reducer

현재 state와 action 을 인자로 받아 상태를 관리하고 새로운 state를 반환하는 실질적인 비즈니스 로직을 담당 (state, action) → newState

🌀 규칙

✅ 순수함수 로 작성되어야 함 → 같은 input에 의해 항상 같은 return 값을 반환
✅ 여러 개의 reducer를 지정했다면 combineReducer로 reducer를 통합
✅ 모든 reducer는 initial state 가 필요

✍️ 작성법

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // 리듀서가 해당 action을 관리하는지 체크
  if (action.type === 'counter/increment') {
    return {
      // 기존 state를 "복사" 해서 관리하고 새로운 값으로 업데이트
      ...state,
      value: state.value + 1
    }
  }
  // 해당 action에 대해 관여하지 않는다면 그냥 기존 state를 반환
  return state
}

immutable update 를 통해 직접적으로 원본 데이터를 조작하지 않고 새로운 데이터를 반환함
→ 상태 변화를 효율적으로 추적하고 관리할 수 있음

🧱 Action & Dispatch

🌀 Action

상태를 변경하는 데 필요한 정보를 갖고 있는 객체

📍 type

• 필수 프로퍼티
• 보통 domain/eventName 의 형태: 어떤 카테고리 (domain) 내 이벤트 (eventName) 가 발생했는지를 정의

📍payload

• action type에 따라 필요한 추가적인 정보

🌀 Dispatch

action을 store로 전달하는 store의 내장함수

✍️ 작성법

//action creator를 통해 매번 action 객체를 정의하지 않아도 됨
export const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

//action creator를 호출하고 결과를 dispatch에 직접 반환
// dispatch가 store에 action을 전달
store.dispatch(addTodo('Buy milk'))