리덕스(Redux)

리덕스는 자바스크립트 상태 관리 프레임워크입니다
자식이 많아져서 상태관리가 복잡해질때 주로 사용합니다

3가지 원칙

1. 스토어에서 동일한 데이터를 가지고 온다(데이터를 저장하는 스토어란 하나뿐인 공간이 있음)
2. 읽기 상태인 상태를 변경하기 위해서는 action이라는 객체를 통해 state를 변경한다
3. 상태 값 변경은 순수함수로만 가능하다 (동일한 인자값이 들어올때 항상 같은 결과를 리턴하는 함수를 순수함수라고 한다)

하나의 객체에 모든 전체 상태 값을 저장

하나의 객체에 모든 상태값을 저장하기에 관리는 어렵지만 활용도가 높다

순수함수로만 상태 값 변경이 가능하다

이렇게 상태값을 변경하는 함수를 리듀서(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;
  }
}

최종 코드 예시