개발의 모든것/Redux

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

연재몬 2022. 3. 26. 20:00

액션 (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)

리듀서는 변화를 일으키는 함수이다. 2가지의 파라미터를 받아온다

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

리듀서는 현재의 상태와, 전달받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

 

만약 카운터를 위한 리듀서를 작성한다면 

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

리듀서에서는 기존 state를 그대로 반환하도록 작성해야한다.

 

리덕스를 사용할때 여러개의 리듀서를 만들고 

이를 합쳐서 루트리듀서를 만들 수 있다. 

 

스토어 (Store)

리덕스에서는 한 애플리케이션 당 하나의 스토어를 가지는게 원칙이다. 

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

 

디스패치(Dispatch)

디스패치는 스토어의 내장함수 중 하나이다.

디스패치 = 액션을 발생시키는 것 

 

dispatch라는 함수에 액션을 파라미터로 전달한다  => ..dispatch(action) 

 

그렇게 호출을 하면 스토어는 리듀서함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고해 

새로운 상태를 만들어주게된다.  

 

구독(Subscribe)

구독 또한 스토어의 내장함수 중 하나.

subscribe함수는 함수형태의 값을 파라미터로 받아온다.

subscribe함수에 특정 함수를 전달해주면 액션이 디스패치될 때마다 전달해준 함수가 호출된다. 

 

리액트에서는 구독보다는 connect함수 또는 useSelector Hook을 사용해서 

리덕스 스토어의 상태에 구독한다.

저작자표시