리덕스 키워드 알아보기

액션 (Action)

리덕스에서 액션은 무엇이 변화되었는지 알려주는 이벤트와 같습니다.
아래와 같이 액션은 하나의 오브젝트로 정의가 됩니다.
액션에서 type값은 필수적인 요소이며, payload와 같이 추가적인 필드를 추가할 수 있습니다.

const addTodoAction = {
  type: 'TYPE',
  payload: 'Buy milk'
}

액션 생성 함수 (Action Creator)

액션 생성 함수는 말 그대로 액션을 생성해주는 함수입니다.
액션 생성 함수는 파라미터를 가져와 리듀서에서 사용될 액션 객체를 만들어줍니다. 아래 예시와 같이 단순히 액션을 return하는 형태를 지니고 있습니다.
쉽게 풀어서 설명하자면, 여기서 단순히 파라미터의 역할은 미래에 변화를 주고 싶은 값을 리듀서로 넘기는 역할을 합니다.

// 형태 1: function 키워드를 사용한 함수
export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 형태 2: 화살표를 사용한 함수 형태
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

리듀서 (Reducer)

리듀서는 상태에 변화를 일으키는 순수함수 입니다.

여기서 순수함수란?
순수함수는 동일한 인자가 주어졌을때 항상 같은 값을 반환하는 함수를 말합니다!
따라서, 순수함수는 외부의 값을 변경, 삭제, 참조하지 않으며 오직 내부 변수 만을 사용합니다.

다시 본론으로 돌아와, 리듀서는 이전에 지정을 해놓은 현재의 상태, 그리고 액션으로부터 전달받은 오브젝트를 참고하여 새로운 상태를 만들어서 반환합니다.

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

더 자세한 사용법이나 컨셉은 다음 에피소드에서 다루도록 하겠습니다 :)

스토어 (Store)

리덕스에서 스토어는 현재의 앱 상태, 리듀서, 그리고 추가적인 내장 함수들이 포함되어 있습니다. 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다.

디스패치 (Dispatch)

디스패치는 스토어의 내장 함수 중 하나입니다.
한마디로 디스패치를 정의하자면, 액션을 발생시키는 trigger(방아쇠) 역할을 합니다.
dispatch함수는 파라미터로 액션을 전달합니다.

구독 (Subscribe)

구독은 디스패치와 같이 스토어의 내장 함수 중 하나입니다.
구독 함수는 리덕스 스토어의 상태를 구독하여 액션이 디스패치 될 때 마다 전달해준 함수가 호출됩니다.
조금 더 쉬운 말로 풀어서 설명하면, 상태 값에 변화가 생길때마다 불려지는 함수입니다.
리덕스를 실제 프로젝트에서 사용할때는 구독함수를 막상 사용할 일이 생각보다 많이 없습니다.