Redux 리덕스

리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 효율적으로 관리할 수 있다.

리덕스는 Action(액션), reducer(리듀서), Store(스토어)으로 이루어져 있다.

---

Action 액션

• 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터를 제공한다.
• 상태에 어떤 변화가 필요하면 액션이 발생한다.
• type 필드를 반드시 가지고 있어야 한다.

{
	type: 'STUDY_REDUX',
    data: {
    	id: 1,
        text: '리덕스 공부하기'
    }
}

액션의 Payload 페이로드 데이터

• 액션의 실행에 필요한 임의의 데이터

---

Action Creator 액션 생성 함수

• 액션 객체를 만들어 주는 함수

function studyRedux(data) {
	return{
    	type: 'STUDY_REDUX',
        data
    }
}

화살표 함수로도 만들 수 있다!

const studyRedux = data => ({
	type: 'STUDY_REDUX',
    data
})

---

Reducer 리듀서

• 변화를 일으키는 함수
• 현재 상태와 전달받은 액션 객체를 참고하여 새로운 상태를 만들어 반환한다.
• 주의해야 할 것!!
  1. 초기상태는 리듀서의 디폴트 인수에서 정의된다.
  2. 상태가 변할 때 전해진 state는 그 자체의 값으로 대체되는 것이 아니라 새로운 것이 합성되는 것처럼 쓰여진다.

const initialState = {
	counter = 1;
}

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

---

Store 스토어

• 현재 애플리케이션 상태와 리듀서와 몇 가지 중요한 내장 함수를 가지고 있다.

1. Dispatch 디스패치

• 액션을 발생시키는 것
• 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다.

dispatch(action)

2. Subscribe 구독

• subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

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