리덕스?
- 가장 많이 사용하는 리액트 상태관리 라이브러리
- 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리, 더욱 효율적 관리 할수있다
- 컴포넌트끼리 똑같은 상태를 공유 해야할때도 여러 컴포넌트 거치치 않고 상태값을 전달, 업데이트
- 개발자 도구 지원, 미들웨어 기능 제공해 비동기 작업을 효율적으로 관리함
핵심 키원드 알아보기-> Parcel로 프로젝트 구성 -> 토글 스위치와 카운터 구현
개념 미리 정리
- 액션 : 상태에 어떠한 변화가 필요하면 액션이 발생. 이는 하나의 객체로 표현
<예시>
{
type: 'ADD_TODO', //필수 액션의 이름
data: { //나중에 상태 업데이트 할때 참고해야할 값
id: 1,
text: '리덕스 배우기'
}
}- 액션 함수: 액션 객체를 만들어 주는 함수, 어떤 변화를 일으켜야 할때마다 액션 객체를 만들어야 하는데 직접 작성하면 실수 있을수잇기 떄문에 함수로 만들어 관리함.
const changeInput = text => ({
type: 'CHANGE_INPUT',
text
})- 리듀서: 변화를 일으키는 함수. 액션을 만들어서 발생하면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 그리고 두 값을 참고 해서 새로운 상태를 만들어 반환.
const initialState = {
counter: 1
};
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1
};
default:
return state;
}
}-
스토어: 프로젝트에 리덕스를 적용하기 위해 스토어를 만든다. 한개의 프로젝트는 단 하나의 스토어만 가질수 있다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며 그 외에도 몇가지 중요한 내장 함수를 지닌다.
-
디스패치 : 스토어의 내장 함수중 하나, 디스패치는 액션을 발생 시키는 것 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출. 이 함수가 호출 되면 스토어는 리듀서 함수를 실행해서 새로운 상태를 만듬.
-
구독: 스토어의 내장 함수 중 하나. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출하면 이 리스너 함수가 액션이 디스패치 되어 상태가 업데이트 될때마다 호출 됨
const listener = () => {
console.log('상태가 업데이트 됨')
}
const unsubscribe = store.subscribe(listener);
unsubscribe(); //추구 구독을 비성화할때 함수 호출리액트 없이 쓰는 리덕스
다른 프레임워크와 함께 사용할수있다. 바닐라 스크립트에서도 쓴다. 자바스크립트 환경에서 사용해보겠다.
액션 타임과 액션 생성 함수 정의
프로젝트 상태에 변화를 일으키는 것을 액션이라고 하는데 액션 이름은 문자열 형태로 주로 대문자로 작성, 고유해야한다 중복되면 의도치 않은 결과가 발생 할 수 있기 때문.
액션 이름을 사용하여 액션 객체를 만드는 생성 함수를 작성한다. 액션 객체는 type 값은 반드시 있어야 하며 추후 업데이트 할때 참고 하고 싶은 값은 자유다.
스토어 만들기
render 함수 만들기
구독하기
추후 리액트 프로젝트에서 리덕스를 사용할때는 이 함수를 사용하지 않고 컴포넌트에서 리덕스 상태를 조회 하는 과정에서 react-redux 라는 라이브러리가 이 작업을 대신 해준다.
액션 발생시키기 - 디스패치
..리덕스 툴킷 권장.. 예제가 안됨..
리덕스 세가지 규칙
- 단일 스토어
- 리듀서는 순수한 함수, 변화를 일으키는 함수는 순수한 함수여야 한다.
- 리듀서 함수는 이전 상태와 객체를 파라미터로 받는다
- 파라미터 외의 값에는 의존 하면 안된다.
- 이전 상태는 절대 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환
- 똑같은 파라미터로 호출 된 리듀서 함수는 언제나 똑같은 결과값을 반환
- 예로 리듀서 함수 내부에서 랜덤 값을 만들거나 Date 함수를 사용하여 현재 시간을 가져오거나 네트워크 요청을 한다면 파라미터가 같아도 다른 결과를 만들어 낼수 있기 때문에 사용하면 안된다. 이러한 작업은 리듀서 바깥에서 처리. 액션을 만드는 과정이나 리덕스 미들웨어에서 처리.
