1. 개념

1.1. 액션(action)

• 상태에 어떤 변화 필요 시 액션 발생
• 하나의 객체로 표현됨
• 애플리케이션 > 스토어 로 보내는 데이터 묶음

{
  type: "TOGGLE_VALUE"
}

action 객체는 type 필드를 가지고 있어야 함

• type: 어떤 형태의 액션이 실행될지 결정함

{
	type:"ADD_TODO",
   	data:{
    		id:0
        	text:"redux"
   	 },
    	text: "hi"
}

• type 필드 외에는 마음대로 넣을 수 있음 : 추후 상태 업데이트 시 참고해야할 값들임.

1.2. 액션 생성 함수(action creator)

• 액션 객체를 만들어주는 함수
• 단순 액션 반환 : 굳이 만들 필요는 없음.

export const changeInput = text => ({
	type:"CHANGE_INPUT",
	text
});

컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해 사용

• 어떤 변화를 일으킬 때마다 액션 객체 생성해야 하기 때문에 이로 인해 발생하는 실수들을 줄이기 위해서 함수로 만들어서 관리함.

1.3. 리듀서(Reducer)

• 변화를 일으키는 함수
• 액션을 보냈을 때 상태가 어떻게 변하는지 명시
• 파라미터 : 현재 상태, 전달받은 액션 객체 => 두 값을 참고하여 새로운 상태를 만들어서 반환해줌

const initialState = {
  counter: 1
};

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

리듀서는 반드시 순수해야함

• 오로지 계산만 가능함 : side effect, 예기치 못한 일 발생, API 호출, 변경 모두 불가능함.

1.4. 스토어(Store)

• 한 애플리케이션 당 한 개의 스토어

  스토어가 하는 일
  1) 애플리케이션 상태 저장
  2) getState()를 통해 state에 접근
  3) dispatch(action)을 통해 state 수정
  4) subscribe(listener)을 통해 리스너 등록

1.4.1. dispatch

• 스토어 내장 함수
• 액션을 발생시킴
• 파라미터로 액션 객체를 넣어 호출하고, 스토어는 리듀서 함수를 실행시켜 새로운 상태로 만들어줌

1.4.2. subscribe

• 스토어 내장 함수
• 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출

const listener = () => {
	console.log(‘상태가 업데이트됨‘);

}
const unsubscribe = store.subscribe(listener);


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