[React.js] 간략한 리덕스(Redux) 정리

리액트를 쓸 일이 있어서 리덕스 구조부터 코드를 짰는데, 코드만 짜고나니 기본적인 개념이 너무 머리에 정리가 안돼서 리덕스에 대해서 간략하게 정리하고자 남겼다.

 

1. 리덕스(Redux)란?

리덕스는 상태를 전역(global)으로 관리하게 해주는 라이브러리다.

즉, 리덕스는 상태 관리를 컴포넌트 바깥에서 할 수 있게 도와준다.

 

2. 리덕스 동작 방식

1) 스토어 설정

2) 컴포넌트의 스토어 구독하기(subscribe)

3) 스토어에게 상태 변경하라고 알리기(dispatch)

 

 

스토어 내부의 상태값은 action dispatch를 통해 변경된다.

 

3. 리덕스 용어 정리

스토어(store)	상태에 관한 데이터들이 담겨있는 저장소
액션(action)	상태변화를 일으킬 때 참조하는 객체
디스패치(dispatch)	액션을 스토어에 전달하는 행위
리듀서(reducer)	상태를 변화시키는 로직을 정의하는 함수
구독(subscribe)	스토어에 있는 특정 데이터의 변동을 감지

 

4. 리덕스 3가지 원칙

1. 리덕스를 사용하는 어플리케이션엔 하나의 스토어만이 존재해야 한다.

 

2. 상태를 직접 변경할 수 없다.

상태를 변경하기 위해서는 액션이 디스패치(dispatch)되어야 한다.

 

3. 리듀서는 '순수 함수'로 작성되어야 한다.

상태를 변경하기 위해 받아온 액션 객체를 처리하는 함수를 리듀서(Reducer)라고 부른다.

액션이 어떤 변화가 일어나야 할지를 알려주는 객체라면, 리듀서는 그 정보를 받고 애플리케이션의 상태를 어떻게 바꿀지를 정의한다. 

 

이러한 리듀서는 '순수 함수'로 작성되어야 하는데, 다음과 같은 조건을 따른다.

1. 외부 네트워크나 데이터베이스에 접근하면 안 되고, 순수하지 않은 API 호출은 금지된다(Date 및 Math 등).
2. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
3. 리턴 값은 오직 매개변수 값에만 의존되어야 한다.
4. 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다
5. 같은 인수로 실행된 리듀서 함수는 언제나 같은 결과를 반환해야 한다.

 

 

 

---

Reference

velopert.com/1225

velopert.com/3528

backback.tistory.com/308?category=801894