Redux

Redux

• Cross-Component or App-Wide State를 관리하는 관리 라이브러리.
• useState와 useReducer로 관리하는 방식 대신 사용함.

Local State

• Single Component에서 유효한 state
• useState, useReducer을 통해 관리

Cross-Component State

• Multiple Component에 유효한 state
• 예> Modal close, open State 등
• prop drilling 이 필요

App-Wide State

• 전체 앱에서 유효한 state
• 예> 사용자 인증 등
• prop drilling 이 필요

Cross-Component or App-Wide State를 관리하기 위해 사용되는 방식인
prop drilling 은 복잡할 수 있음.
-> 이에 대한 해결책: Context API 또는 Redux를 사용하자!

---

Redux vs. Context API

• context API를 사용하면 context와 contextProvider을 중심으로 상태관리를 쉽게 할 수 있음.
• 🧐 그렇다면, 왜 Redux를 사용하는 걸까?

Redux context의 잠재적 단점

1. 설정과 관리가 어려워질 수 있다. (복잡성)

• 대형 어플리케이션일수록 복잡성을 띈다.
• Provider의 중첩 등 상태가 방대해지게 된다.

2. 성능 문제가 발생할 수 있다.

• 고빈도의 변경은 성능을 저하시킬 수 있다.
• Context는 상황에 따라 성능 면에서 좋지 않을 수 있다.

---

Redux 작동 방식

1. 한 애플리케이션당 하나의 스토어만 가진다.

• 상태를 저장하는 스토어(store) = 저장소
• 저장소에 데이터를 저장해서 컴포넌트에서 사용 가능.
• 컴포넌트에서 이벤트를 감지하여 UI 업데이트 가능.
• 즉, 구독(Subscription)하여 데이터가 변경될 때 마다 스토어가 컴포넌트에 알려준다.

2. 컴포넌트가 직접 상태를 변환하지 않는다.

• 리듀서(reducer) 함수를 사용하여 상태를 업데이트한다.
• 여기서, reducer은 useReducer Hook에서와는 의미가 다르다.
• 데이터 변환을 '트리거' 하기 위해서 컴포넌트가 액션을 Dispatch함.
  • Action은 '객체', Dispatch는 '함수'
  • 즉, 컴포넌트는 특정 이벤트를 감지한 후 Reducer가 수행하도록 하기 위해 액션 객체를 디스패치함.
  • 리덕스는 '액션'을 리듀서 함수로 전달하고, 원하는 작업에 대한 설명을 전달받아 실행하게 됨.
  • 리듀서 함수가 실행되면, 상태가 변경되고, store를 구독중이였던 해당 컴포넌트의 UI를 업데이트 시킴.

---

Redux 사용 예제

import { createStore } from 'redux';

const store = createStore(counterReducer);

const counterReducer = (state, action) => {
  return {
    counter: state.counter + 1
  }
};

createStore

• Redux에서는 redux-toolkit의 configStore의 사용을 권장함.
• state

Reducer

• 2개의 파라미터를 가짐.

1. 기존 State
2. 발송된 action

• 항상 새로운 state를 반환해야 함. (업데이트)

• 단, 어떤 부수 효과(Side Effects)도 없어야 함!

---