[Redux]리덕스 라이브러리 이해하기
1. 개념 미리 정리하기
1. 액션
👀 액션(Action)
👣 상태에 어떠한 변화가 필요하면 액션(Action) 발생
👣 액션은 하나의 객체로 표현
👣 type 필드(액션 이름) 반드시 가짐
{
type: 'TOGGLE_VALUE"
}
2. 액션 생성 함수
👀 액션 생성 함수(action creator)
👣 액션 객체를 만들어 주는 함수
function addTodo(data) {
return {
type: 'ADD_TODO',
data
};
}
const changeInput = text => ({
type: 'CHANGE_INPUT',
text
});
3. 리듀서
👀 리듀서(reducer)
👣 변화를 일으키는 함수
👣 액션 만들어 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옴
👣 현재 상태와 전달받은 액션 객체를 참고해 새로운 상태 만들어 반환
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1
};
default:
return state;
}
}
4. 스토어
👀 스토어(store)
👣 프로젝트에 리덕스 적용
👣한 개의 프로젝트는 단 하나의 스토어만 가짐
👣 현재 애플리케이션 상태와 리듀서가 들어 있음 + 내장함수
5. 디스패치
👀 디스패치(dispatch)
👣 스토어의 내장 함수 중 하나
👣 액션을 발생시키는 것
👣 dispatch(action)
👣 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태 만듦
6. 구독
👀 구독(subscribe)
👣 스토어의 내장 함수 중 하나
👣 리스너 함수를 파라미터로 넣어서 호출 ➡️ 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출 됨
const listener = () => {
console.log('상태가 업데이트 됨');
}
const unsubscribe = store.subscribe(listener);
unsubscribe();
2. 리덕스의 세 가지 규칙
1. 단일 스토어
👀 하나의 애플리케이션 안에는 하나의 스토어가 들어 있음
👀 스토어 여러개 사용 가능하나 상태 관리 복잡해짐
2. 읽기 전용 상태
👀 리덕스 상태는 읽기 전용
👀 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함
👀리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문
3. 리듀서는 순수한 함수
👀 변화를 일으키는 리듀서는 순수한 함수여야 함
👀 순수한 함수의 조건
👣 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음
👣 파라미터 외의 값에는 의존하면 안 됨
👣 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환
👣 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환
Author And Source
이 문제에 관하여([Redux]리덕스 라이브러리 이해하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jeongyeon_kim/React리덕스-라이브러리-이해하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
👀 하나의 애플리케이션 안에는 하나의 스토어가 들어 있음
👀 스토어 여러개 사용 가능하나 상태 관리 복잡해짐
👀 리덕스 상태는 읽기 전용
👀 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함
👀리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문
👀 변화를 일으키는 리듀서는 순수한 함수여야 함
👀 순수한 함수의 조건
👣 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음
👣 파라미터 외의 값에는 의존하면 안 됨
👣 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환
👣 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환
Author And Source
이 문제에 관하여([Redux]리덕스 라이브러리 이해하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jeongyeon_kim/React리덕스-라이브러리-이해하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)