16장 리덕스 라이브러리 이해하기 🧑💻
리덕스는 가장 많이 사용되는 리액트 라이브러리다.
리덕스를 이용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 더 효율적으로 관리할 수 있다.
리덕스는 전역상태 관리에 아주 효과적이다.
액션
상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다.
이는 하나의 객체로 표현되는데 액션 객체는 다음과 같다.
{
type : 'TOGGLE_VALUE"
}액션 객체는 type 필드를 반드시 가지고 있어야한다.
예시 액션
{
type : 'ADD_TODO',
data :{
id : 1,
text : '리덕스 배우기'
}
}
{
type : 'CHANGE_INPUT',
text : '안녕하세요'
}액션 생성 함수
function addTodo(data) {
return {
type: "ADD_TODO",
data,
};
}
const changeInput = (text) => ({
type: "CHANGE_INPUT",
text,
});변화를 만들 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 어렵기 때문에, 액션생성함수를 이용하여 관리한다.
리듀서 (reducer)
리듀서는 위에서 말한 변화를 만드는 함수다.
액션을 만들어 발생시키면 리듀서가 현재 상태와 전달 받은 액션 객체를 파라미터로 받아온다.
그리고 두 값을 참고하여 새로운 상태를 만들어 반환해준다.
리듀서 코드 예시
const initialState = {
counter: 1,
};
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1,
};
default:
return state;
}
}스토어
리덕스를 적용하기 위해서는 스토어가 필요하다.
한 개의 프로젝트는 하나의 스토어만 가질 수 있으며,
스토아 안에는 현재 어플리케이션 상태와 리듀서가 들어가 있다.
그외에도 몇 가지 중요한 내장 함수를 갖고 있다.
디스패치
디스패치는 스토어의 내장함수이다.
디스패치는 액션을 발생시키는 것이라고 이해하면 된다.
구독
스토어의 내장함수다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어 호출해주면 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될 때마다 호출된다.
예시
const listener = () => {
console.log("상태가 업데이트 됨");
};
const unSubscribe = store.subscribe(listener);
unsubscribe();✏️ 리덕스의 3가지 규칙
-
단일 스토어
하나의 프로젝트에는 하나의 스토어만 있어야 한다.
여러개의 스토어를 사용하는 것이 가능하긴 하지만, 특정 업데이트가 너무 빈번하게 일어나면 상태관리가 매우 복잡해질 수 있다.
-
읽기 전용 상태
리덕스 상태는 읽기 전용이다.
리액트의 setState를 이용하여 state를 업데이트 해주는 과정에서 불변성을 지켜주기 위해 ...(spread)연산자를 이용하거나 immer와 같은 불변성 관리 라이브러리를 사용했는데 리덕스도 마찬가지다.
리덕스가 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 검사를 하기 때문이다.
객체의 변화를 감지할 때, 객체 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있는 것이다.
- 리듀서는 순수한 함수
순수한 함수란?
리듀서함수는 이전 상태와 액션객체를 파라미터로 받아야 함.
파라미터 외의 값에는 의존하면 안됨.
이전 상태는 절대로 건드리지않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야한다.
예를 들어 date함수나 랜덤 값을 만들 때 파라미터가 같아도 다른 결과를 만들어 내기 때문에 사용하면 안된다.
위와 같은 작업은 리듀서 밖에서 처리를 해주어야 한다.
주로 네트워크 요청과 비동기 작업은 미들웨어를 통해 관리한다.
