[react] 리덕스

한 삼십만년만에 포스팅하는 느낌!!!! 왜지???ㅋㅋㅋㅋㅋㅋ

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리라고 한다!!!

리덕스 키워드 개념

액션

상태에 어떤 변화가 필요하면 액션이 발생한다. 얘는 하나의 객체로 표현되는데 다음과 같은 형식으로 이루어져 있다!!

{
    type: 'TOGGLE_VALUE'
}

액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다!!!

그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다!!

{
    type: 'ADD_TODO',
    data: {
    	id: 1,
        text: '리덕스 배우기'
    }
}

{
    type: 'CHANGE_INPUT',
    text: '안녕하세요'
}

대충 이런식으로!!

액션 생성 함수

액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수이다.

리듀서

리듀서는 변화를 일으키는 함수이다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다!! 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 준다!!

리듀서 코드는 다음과 같은 형태로 이루어져있다!!

const initalState = {
	counter: 1
};
function reducer(state = initalState, action) {
	switch (action.type) {
    	case INCREMENT:
        	return {
                counter: state.counter + 1
           	};
        default:
        	return state;
    } 
}

action의 타입이 INCREMENT면 state의 counter값을 1만큼 증가시키고 아니면 그냥 state 유지!!

스토어

프로제그에 리덕스를 적용하기 위해 스토어(store)를 만든다!! 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다!!

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇가지 중요한 내장 함수를 지닌다!!

디스패치

디스패치(dispatch)는 스토어의 내장 함수 중 하나이다!! 디스패치는 '액션을 발생시키는 것' 이라고 이해하면 된다!!!

이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다!! 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다!!

구독

구독도 스토어의 내장 함수 중 하나이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다!!

const listener = () => {
    console.log('상태가 업데이트됨!!!');
}
const unsubscribe = store.subscribe(listener);

unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

 

---

참고 자료

「리액트를 다루는 기술 - 김민준」