리덕스에 사용하는 키워드
액션 (Action)
상태에 어떠한 변화가 필요하게 될 땐, 액션이란 것을 발생시키며 하나의 객체로 표현된다. 액션은 다믕과 같이 아루어져 있다. type은 필수로, 그 외에 값은 개발자 마음대로.
{
type: "TOGGLE_VALUE",
data: {
id: 0,
text: "리덕스 배우기"
}
}액션 생성함수 (Action Creator)
파라미터를 받아와서 액션 객체 형태로 만들어 준다. 컴포넌트에서 쉽게 액션을 발생시키기 위해서 사용한다. 필수 요소는 아니며, 액션 발생시킬 때마다 직접 액션 객체를 작성 가능하다.
export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}스토어 (Store)
한 애플리케이션당 하나의 스토어
현재의 앱 상태와, 리듀서, 내장함수 포함
리듀서 (Reducer)
변화를 일으키는 함수로, 두가지 파라미터를 받는다 (state, action)
현재 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어 반환한다. useReducer의 경우에는 default 부분에 Throw new Error ('Unhandled Action')으로 처리하는게 일반적인 반면, 리덕스의 리듀서는 기존 state를 그대로 반환하도록 작성해야 한다. 리덕스에서는 여러개의 리듀서를 만들고 이를 합쳐 루트 리듀서를 만들 수 있다. 루트 리듀서 안의 리듀서들은 서브 리듀서라고 부르다.
디스패치 (dispatch)
스토어 내장함수 중 하나. 액션을 발생시킨다.
구독 (subscribe)
스토어의 내장함수
subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
(리액트에서는 connect 함수 또는 useSelector Hook 을 사용)
리덕스의 3가지 규칙
-
하나의 애플리케이션에 하나의 스토어
-
상태는 읽기전용
리액트의 불변성
- 리액트의 불변성?
상태를 업뎃할 때, setState를 사용하고, 배열을 업뎃할 때에는 배열 자체에 push를 직접 하지 않고, concat같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어 교체하는 방식으로 업뎃한다. 싶은 구조의 객체를 업뎃할 때에도 Object.assign을 사용하거나 spread 연산자를 사용하여 업데이트 한다.
리덕스에서도 불변성 유지하는 이유는 내부적으로 데이터 변경을 감지하기 위하여 Shallow equality검사를 하기 때문이다. 객체 변화를 비교하는 방식이 깊은 비교가 아니라 얇은 비교여서 좋은 성능 유지가 가능한것. 또한 리덕스에서 기존 상태 안건들이고 새로운 상태를 생성해 업데이트 하는 방식을 유지하면 나중에 개발자 도구를 통해 뒤로 돌릴 수 있고 다시 앞으로도 돌릴 수 있다.
- 변화를 일으키는 함수, 리듀서는 순수한 함수
동일한 인풋 => 동일한 아웃풋
new Date(), 랜덤 숫자 생성, 네트워크에 요청 등은 순수하지 않은 작업(?) -> 리듀서 밖에서 처리 혹은 리덕스 미들웨어를 사용한다.
리덕스미들웨어
이전의 상태는 안건들이고,변화 일으킨 새로운 상태 객체를 만들어 반환한다.
