Redux 를 알아보자

리덕스가 뭐야?

"상태 관리 라이브러리" 입니다. React를 배우면서 같이 배우는 경우가 많아 React 전용으로 알기 쉬운데, 사실 바닐라js에서도 사용할 수 있고 다른 프레임워크에서도 사용할 수 있습니다. 복잡한 구조 속에서 전역으로 상태를 관리하는 역할을 합니다.

리덕스(Redux) 왜 써?

1. 전역 상태 관리 -> 코드의 유지보수성 및 작업 효율 향상
2. 편리한 개발자 도구 지원 (Redux devtool)
3. 비동기 작업을 효율적으로 사용할 수 있도록 도와줌 (미들웨어)

1번의 경우 단순 전역관리는 context API도 가능하지만 상대적으로 리덕스가 더욱 체계적으로 관리할 수 있기 때문에 대규모 프로젝트에서 유리합니다

리덕스의 구성 요소

1. 액션
2. 액션 생성 함수
3. 리듀서
4. 스토어
5. 디스패치
6. 구독

액션

상태에 어떤 변화가 필요하면 액션 이란 것이 발생합니다. 이것은 객체로 표현됩니다.
액션 객체는 반드시!!! type 필드를 가져야 합니다. 이는 상태 업데이트시 참고가 될 값 입니다.

{
	type: "ADD_TODO",
    data: {
      id: 1,
      text: "이런식으로 type과 data(내맘대로) 지정 가능합니다"
    }
}
{
  type: "CHANGE_INPUT",
  text: "이름이 data일 필요는 없습니다. 객체일 필요도 없공"
}

액션 생성 함수

액션 객체를 만들어 주는 함수입니다.

function addTodo(data) {
	return{
		type: "ADD_TODO:,
      	data: data,
    }}

화살표 함수로도 가능하고, data는 축약 방식으로 작성 가능합니다.
위의 액션 중에 ADD_TODO의 타입을 가진 것을 생성해주는 예시입니다.

어떤 변화가 일어나면 그때마다 액션 객체를 만들어줘야합니다. 이에 대한 실수를 방지하기 위해 액션을 만들어주는 함수를 통해 관리하게 됩니다.

리듀서 (reducer)

변화를 일으키는 함수! 입니다.
액션 생성 함수가 액션을 만들고
--> 액션 객체가 발생하면 이를 리듀서가 현재 상태와 파라미터로 받아옵니다
--> 리듀서는 두 값 (현재 상태,액션)을 받아, 새로운 값을 반환 합니다.

switch문을 사용해서 action 종류에 따라 반환 값을 제어합니다.

const initialState = {
	count: 1
};

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

스토어 (store)

한 개의 프로젝트에는 단 한 개의 스토어를 만듭니다.
스토어는 현재 애플리케이션 상태와 리듀서가 들어 있습니다. (이 외에 몇가지 내장함수 포함)

디스패치 (dispatch)

스토어의 내장 함수 입니다.
디스패치는 "액션을 발생시키는 것!!!" 입니다.

dispatch(action)의 형태로 액션 객체를 파라미터로 넣어서 호출 합니다. 그러면 스토어는 리듀서를 통해 새로운 상태를 만들어서 반환해줍니다.

구독 (subscribe)

스토어의 내장 함수 입니다.
리스너 함수를 넣어서 호출하면, 이 함수는 상태가 업데이트 될 때마다 호출 됩니다.