리덕스는 자바스크립트 상태 관리 프레임워크입니다
자식이 많아져서 상태관리가 복잡해질때 주로 사용합니다
하나의 객체에 모든 상태값을 저장하기에 관리는 어렵지만 활용도가 높다
이렇게 상태값을 변경하는 함수를 리듀서(reducer)라 한다
(state, action) => nextState
const store = createStore(rootReducer);
action은 type속성 값을 가진 자바스크립트 객체다
액션 객체를 dispatch 메소드에 넣어 호출하면
리덕스는 일련의 과정을 통해 상태 값을 변경한다
즉 데이터를 스토어에 전달해주는 역할을 한다
{
type: 'order', // 타입은 꼭 넣어줘야댐
drink: {
menu: 'coffe',
size: 'tall',
iced: false
}
}
// 액션 생성 함수
export function orderList(drink) {
return {
type: 'coffee',
drink
}
}
액션을 이용해 스토어에게 상태를 전달해줌
액션 객체는 dispatch에게 전달되고 dispatch는 리듀서를 호출해서 새로운 상태를 생성
// 리듀서는 현재의 상태와 전달받은 액션 두가지를 파라미터로 받아옵니다
function reducer(state, action) {
// 상태 업데이트 로직
return alertedState;
}
// 카운터 예시
function counter(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}