리덕스 사용 키워드 숙지하기

정영찬·2022년 3월 12일
0

리액트

목록 보기
49/79

액션 (action)

상태에 어떠한 변화가 필요한 경우, 발생시키는 것으로, 액션은 하나의 객체로 표현된다.

{
	type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야하며, 그 외의 data같은 경우는 작성자 재량대로 작성 가능하다.

액션 생성함수 (Action Creator)

말 그대로 액션을 생성하는 함수. 다른 객체에서 받아온 파라미터를 바탕으로 액션 객체를 생성한다.

export function sayHi(greeting) {
  return {
    type: "SAY_HI",
    data
  };
}

컴포넌트에서 쉽게 액션을 발생시키기 위해서 작성하며, 함수 앞에 export 키워드를 붙여서 다른 파일에 불러와서 사용한다.

리듀서(Reducer)

변화를 일으키는 함수.

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

현재 상태와 전달 받은 액션을 바탕으로 새로운 상태를 생성하여 반환하다. useReucer를 사용할때 작성하는 리듀서와 같은 형태를 가지고 있음. 단 차이점이 있다면 default의 경우 기존의 state를 그대로 반환하도록 설정해야한다.

복수의 리듀서를 합쳐서 루트 리듀서를 제작할수 있다.

스토어(Store)

하나의 어플리케이션마다 하나의 스토어를 제작한다. 스토어 내부에는 현재 앱의 상태, 일련의 내장함수들이 존재한다.

디스패치(dispatch)

액션을 발생시키는 역할을 맡고 있다. dispatch라는 함수에는 액션을 파라미터로 전달하며, 호출시 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면, 그것들 참고해서 새로운 상태를 만든다.

구독(subscribe)

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

직접 사용하는 일은 많이 없으며, react-redux라는 라이브러리에서 제공하는 connect함수 또는 useSelectorhook을 사용하여 리덕스 스토어의 상태에 구독한다.

profile
개발자 꿈나무

0개의 댓글