리덕스에서 사용되는 키워드

액션 (Action)

상태에 어떠한 변화가 필요하게 될 때, 액션이란 것을 발생 시킵니다.

• 이는, 하나의 객체로 표현이되고 type 이라는 필드는 필수로 가지고 있어야 합니다.

{
  type : "TOGGLE_VALUE"
}

• type 외의 값들은 개발자 마음대로 넣을 수 있습니다.

{
  type : "TOGGLE_VALUE",
  data : {
    	id : 0,
    	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 state;
}

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

카운터를 위한 리듀서를 만든다면

function counter(state, action){
	switch (action.type){
      case 'INCREASE' :
        return state + 1;
     
      case 'DECREASE' :
        return state - 1;
        
      default :
        return state;
    }
}

• 리덕스에서는 리듀서의 기존 default 에 기존 state 를 반환하도록 작성 합니다.
• 리덕스를 사용 할 때는 여러 개의 리듀서를 만들고 이를 합쳐러 루트 리듀서 (Root Reducer) 를 만들 수 있습니다. ( 루트 리듀서 안에 리듀서들은 서브 리듀서 라고 부릅니다. )

---

스토어 ( Store )

리덕스는 하나의 애플리케이션에 하나의 리덕스 스토어를 만들게 됩니다.

• 스토어 안에는 현재의 앱 상태와, 리듀서가 들어있고, 몇 가지의 내장 함수들이 있습니다.

---

디스패치 ( dispatch )

스토어의 내장 함수 중 하나 입니다. 액션을 발생 시키는 것 이라고 이해 할 수 있습니다.

• dispatch 라는 함수에는 액션을 파라미터로 전달 합니다.
• dispatch(action)
• 위와 같이 호출을 하면, 스토어는 리듀서 함수를 실행 시켜서 해당 액션을 처리하는 로직이 있다면 참고하여 새로운 상태를 만들어 줍니다.

---

구독 ( subscribe )

스토어의 내장 함수 중 하나 입니다. 함수 형태의 값을 파라미터로 받아 옵니다.

• subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출 됩니다.
• 리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다.
• 대신, react-redux 라이브러리에서 제공하는 connect 또는 useSelector 를 사용하여 리덕스 스토어의 상태에 구독 합니다.

---

참고

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