[Redux]리덕스 라이브러리 이해하기

2347 단어 ReactreduxReact

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. 리듀서는 순수한 함수

👀 변화를 일으키는 리듀서는 순수한 함수여야 함
👀 순수한 함수의 조건
	👣 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음
    👣 파라미터 외의 값에는 의존하면 안 됨
    👣 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환
    👣 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환

좋은 웹페이지 즐겨찾기