Redux

리덕스란?

리덕스는 가장 사용률이 높은 상태관리 라이브러리이다.
리덕스를 사용하면 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리

리덕스를 사용하는 것이 유일한 솔루션은 아니며 Context API를 통해서도 가능

리덕스의 필요성

Root 컴포넌트에 something 이라는 상태 값이 있고, onDoSomething 이라는 함수가 something 값에 변화를 줌.
하지만 이렇게 되면 실제로는 해당 props를 사용하지 않는 컴포넌트를 거쳐가야 하므로 개발자로서 너무 비효율적이다.

하지만 리덕스가 있으면 리덕스 스토어를 통해 상태값과 함수를 직접 주입할 수 있다.

Action

상태에 어떠한 변화가 필요할 때, 액션이라는 것을 발생시킴. 이는 하나의 객체로 표현되며 액션 객체는 type필드를 필수적으로 가지고 있어야 함.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

Action Creator (액션 생성함수)

액션을 만드는 함수.

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

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Reducer (리듀서)

Reducer는 변화를 일으키는 함수다. 두가지의 파라미터를 받아옴.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

store (스토어)

리덕스에는 한 애플리케이션 당 하나의 스토어를 만들게 됨. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가 있음.

dispatch (디스패치)

디스패치는 스토어의 내장 함수 중 하나. 액션을 발생시키는 것이라고 생각하면 됨. dispath 라는 함수에 액션을 파라미터로 전달.
그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줌.

subscribe (구독)

구독 또한 스토어이 내장 함수 중 하나. 함수 형태의 값을 파라미터로 받아옴.
subscribe 함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때마다 전달해준 함수가 호출됨.