Redux

리덕스?

리덕스는 상태관리 라이브러리 중 하나로 여러가지 상태관리 라이브러리 중 가장 많이 활용

Store 라는 변수를 이용하여 전역 상태관리
스토어를 사용하면 상태를 조회하기 간편하고 관리하는 것 또한 간편

React에서 불필요한 props를 전달하고 자식 컴포넌트가 다시 자식 컴포넌트에게 props를 전달하게 되는 불필요한 props 전달을 막을 수 있음 (props-drilling)

Action (액션)

상태를 변화시키기 위해 변화에 대한 정보가 필요한 액션은 상태 변화에 대해 알려주는 순수 JS객체
액션 객체는 상태 변화에 대한 type을 필수로 갖고 있어야 하고

액션의 type은 액션의 행위를 나타내는 문자열

{ type : "ADD_TODO", todo : [] }
{ type : "CHECK_TODO", id : 1 }

Reducer (리듀서)

상태와 액션을 가지고 함수를 실행하는 역할
두 가지 인자 - 1. 이전 상태릐 정보 2. 액션 객체

액션에 대한 함수를 정의하고 함수를 실행해서 상태를 업데이트

Dispatch (디스패치)

디스패치는 액션을 실행시키는 역할을 하고 액션을 인자로 받게됨
1. 디스패치로 액션을 실행 ex) dispatch(action)
2. 리듀서는 이전 상태와 액션 객체를 받아 스토어 상태를 업데이트 ex) reducer(prevState, action)

리덕스의 세 가지 원칙

1. 응용 프로그램의 전역상태는 단일 저장소 내의 트리에 저장
2. 상태는 읽기 전용
3. 순수 함수에 의해 변경되어야함

ducks 패턴

파일을 구조 중심이 아닌 기능 (모듈) 중심으로 파일을 나누는 것
ducks 패턴을 사용하게 되면 코드가 직관적이고 읽기 쉽게 사용할 수 있게 됨

1. 항상 reducer()란 이름의 함수를 export default 해야함
2. 항상 모듈의 action 생성자들을 함수 형태로 export 해야함
3. 항상 npm-module-or-app/reducer/ACTION_TYPE 형태의 action을 가져야함
4. 경우에 따라 action 타입들을 UPPER_SNAKE_CASE로 export 할 수 있음 (만약 외부 reducer가 해당 action들이 발생하는지 계속 기다리거나 재사용할 수 있는 라이브러리로 퍼블리싱 할 경우에)