[TIL] sparta 27일차 - Redux

Redux

• 전역상태 관리 라이브러리
• 중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)
• useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.
• seState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜준다.

 

 

1. 스토어(Store)

비유: 데이터 저장소

애플리케이션의 상태 트리를 가지고 있는 객체

리듀서 수준에서 결합이 일어나기 때문에, Redux 앱에는 단 하나의 저장소만 있어야 합니다

type Store = {
  dispatch: Dispatch,    // 기본 디스패치 함수
  getState: () => State,    // 저장소의 현재 상태를 반환합니다
  subscribe: (listener: () => void) => () => void, // 상태가 바뀔 때 호출될 함수를 등록합니다
  replaceReducer: (reducer: Reducer) => void  // 핫 리로딩과 코드 분할을 구현할때 사용됩니다. 여러분이 사용할 일은 별로 없습니다.
}

 

 

 

2. 액션(Action)

비유: 요청서

액션은 무엇이 일어났는지를 나타내는 일종의 요청서입니다

예를 들어, To-Do 애플리케이션에서 "할 일 추가"라는 액션은 새로운 할 일을 추가하라는 요청서입니다.

 

 

 

3. 리듀서(Reducer):

비유: 일꾼

리듀서는 액션을 받아서 스토어의 상태를 업데이트하는 함수입니다.

"할 일 추가" 액션이 왔을 때, 리듀서는 현재 할 일 목록에 새로운 할 일을 추가하여 업데이트합니다

 

 

4. 디스패치(Dispatch)

비유: 일 시키기

디스패치는 액션을 스토어에 전달하는 것을 의미합니다

"할 일 추가" 액션을 디스패치하면, 리듀서가 그에 따라 일을 처리하여 상태를 업데이트합니다.

 

 

 

Redux 동작원리 흐름

 

 

디스패치(Dispatch): "할 일 추가" 액션을 스토어에 보냅니다.
리듀서(Reducer): 받은 액션을 처리하여 새로운 상태를 생성합니다.
스토어(Store): 새로운 상태로 업데이트됩니다.
컴포넌트(Component): 업데이트된 상태를 감지하여 화면을 다시 그립니다.