[React] redux

리덕스(redux)

- 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리

 

redux를 사용하기 적절한 때

• 계속해서 바뀌는 상당한 양의 데이터가 있음
• 상태를 위한 단 하나의 근원이 필요함
• 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 적절하지 않음

redux 기본 개념

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. State is read-only

• 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 리듀서와 연관되는 개념이다.
• Store(스토어) – Action(액션) – Reducer(리듀서)

 

-> 리액트를 사용하면, 상태값을 컴포넌트에 종속시키지 않고 상태 관리를 바깥에서 관리할 수 있음

 

RTK (Redux Toolkit)

- redux 로직을 작성하기 위해 redux 공식 문서에 추천하는 방법

-  저장소 준비, 리듀서 생산과 불변 수정 로직 작성, 상태 "조각" 전부를 한번에 작성 등 일반적인 작업들을 단순화해주는 유틸리티를 포함

---

상태값을 저장하는 저장소 : 스토어(Store)

• 스토어(store)는 상태가 관리되는 오직 하나의 공간
• 컴포넌트와는 별개로 스터오라는  공간이 있어 그 스토어 안에 앱에서 필요한 상태를 담음
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근
• 스토어(Store)는 모든 상태 값을 저장하며 상태 값을 조작할 리듀서(Reducer) 함수를 인자로 받음.
  • createStore를 사용하여 스토어를 만듦

상태를 조작하는 함수 : 리듀서(Reducer)

• 액션을 스토어에 바로 전달하는 것이 아니라 리듀서에 전달해야함
• 리듀서가 주문을 보고 스토어의 상태를 업데이트함
  • 액션을 리듀서에 전달하기 위해 dispatch() 메소드를 사용
    • 디스패처(Dispatcher) 함수는 액션 값과 상태에 관한 데이터를 리듀서(Reducer) 함수에 전달하는 역할
• 리듀서(Reducer) 함수는 초기 상태 값과 액션(action)을 인자로 받아 액션에 조작할 상태(State)를 지정하는 역할
• 변화를 일으켜주는 함수
  • 이 함수에는 각 액션타입마다, 액션이 들어오면 어떤 변화를 일으킬지 정의함.
  • 변화를 일으킬 때에는 불변성을 유지시켜야함

어떤 변화가 필요할 때 발생시키는 신호 객체 : 액션(Action)

• Action은 앱에서 스토어에 운반할 데이터(주문서)로 js 객체 형식임
• 어떤 데이터를 어떻게 바꿀 것이냐에 대한 일종의 신호를 의미
• 어떤 동작에 대해 선언된 액션(Action) 객체는 type이라는 필드를 변화가 필요한 상황을 인지하기위해 사용하며 이 객체에 변화할 때 필요한 데이터를 담을 수도 있음
  • 액션 함수를 만드는 이유 : 그때 그때 액션을 만들 때마다 직접 {이러한 객체} 형식으로 객체를 일일이 생성하는 것이 번거롭기 때문에 이를 함수화한 것

 

Action(액션) 객체가 dispatch() 메소드에 전달된다.

dispatch(액션)를 통해 Reducer를 호출한다.

Reducer는 새로운 Store 를 생성한다.

 

참고 : https://velopert.com/3528 , https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/