참고 : https://react.vlpt.us/redux/01-keywords.html

Redux 키워드

액션(Action)

• 상태에 어떠한 변화가 필요할 때, 액션을 발생시킨다.
• 하나의 객체로 이루어져 있다.

{
  type: "TOGGLE_VALUE"
}

• 액션 객체는 type을 필수적으로 가지고 있어야하고, 그 외의 값들은 마음대로 넣어줘도 된다.

• 예시

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

{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

액션 생성함수 (Action Creator)

• 액션 생성함수는 액션을 만드는 함수이다.
• 파라미터를 받아와서 액션 객체 형태로 만들어준다.

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

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

• 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다.
  • 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다.
• 리덕스를 사용할 때 액션 생성함수를 사용하는 것이 필수적이진 않다.
• 액션을 발생시킬 때마다 직접 액션 객체를 작성할 수도 있다.

리듀서 (Reducer)

• 변화를 일으키는 함수.
• 두 가지의 파리미터를 받아온다.

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

• 리듀서는 현재 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.
• 이 리듀서는 useReducer를 사용할 때 작성하는 리듀서와 똑같은 형태를 가지고 있다.

스토어(Store)

• 리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다.
• 스토어 안에는, 현재의 앱 상태, 리듀서가 들어가있고, 추가적으로 몇 가지 내장 함수들이 있다.

디스패치 (dispatch)

• 스토어의 내장 함수
• 디스패치는 액션을 발생시키는 것
• dispatch라는 함수에는 액션을 파라미터로 전달한다.
  • dispatch(action)
• 호출을 하면 스토어는 리듀서 함수를 실행시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

구독 (subscribe)

• 스토어의 내장함수
• subscribe 함수는 함수 형태의 값을 파라미터로 받아온다.
• subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출된다.