DEV Community: leo

Mock and Stub

leo — Sat, 27 Mar 2021 08:54:25 +0000

Intro

최근에 현재 일하는 회사의 admin 프로젝트에 testing library를 통해 테스트 환경을 구현하기 위해서 노력 중이다.

컴포넌트 테스트 코드를 작성할 때, api의 호출에 대한 의존성이 걸린 부분이 많았다. 따라서 테스트 코드를 원활하게 작성하기 위해서 이런 부분을 해결하기 위해서 Test Double이란 방법을 사용해야 했다.

따라서 이에 대해 한번 정리를 해봐야 할 필요성이 느껴져서 블로그 글을 작성하게 됐다.

테스트의 방법론에 대해서 공부를 해 본 사람이라면 Test Double이라는 용어에 대해서 분명 들어봤을 것이다.

나 같은 경우는 한 회사에서 면접을 봤을 때, 면접관이 Test Double의 Mock과 Stub에 대해서 질문을 했기 때문에 그때 이 용어를 처음 들어봤었다. 물론 그때 당시에는 대답하지 못했었다.

Test Double이란

Test Double이란 용어는 할리우드의 Stunt Double 에서 유래가 생겼다. 할리우드에서 액션 영화를 찍을 때 영화배우들은 위험한 장면들을 촬영해야 하는 경우가 많다. 만약 실제 배우들이 다치게 되면 영화를 찍을 수가 없기 때문에, 다른 사람들이 이런 위험한 상황을 대신 찍어야 했는데 이를 대신해서 촬영하는 스턴트 배우들을 'double'이라고 한다.

Test Double의 역할도 Stunt Double과 별반 다르지 않다. 먼저 xUnit Test Patterns의 저자인 Gerard Meszaros가 정의한 테스트 더블을 살펴보자.

When we are writing a test in which we cannot (or chose not to) use a real depended-on component (DOC), we can replace it with a Test Double.

쉽게 풀이를 해보자면, 우리가 테스트 코드를 작성할 때 해당 테스트 코드에서 의존성 문제를 해결할 수 없거나, 해결할 수 있지만 사용하길 원하지 않는 경우, 우리는 이런 의존성을 테스트 더블을 통해서 대체할 수가 있다. 테스트 더블은 테스팅용 목적으로 실제 의존성을 대체하는 것을 말한다.

물론 이런 의존성이 항상 문제가 되는 것은 아니다. 하지만 이런 의존성 들이 side effect(ex: API 요청, 데이터베이스 접근, 상태 값 변경등)를 가지고 있다면 테스트를 어렵게 만드는 요소가 된다.

테스트 더블은 이런 의존성 때문에 테스트를 진행하기 어렵거나, 테스트를 진행했을 때의 기회비용이 큰 경우(테스트 안에서 특정 라이브러리를 실제로 실행을 하는 경우 작업이 너무 무거워서 시간이 오 래걸리는 경우), 이를 대신해서 테스트를 쉽게 할 수 있도록 사용할 수 있는 객체를 말한다.

테스트 더블에서 가장 많이 언급되는Stub과 Mock에 대해서 최대한 쉽게 설명을 해보겠다.

Stub

stub이란 미리 정해진 상세한 데이터값을 가진 있는 객체이고 테스트를 수행할 때 의존성 대체를 해서 나올 결과값을 대체할 때 사용한다.

결과값을 살펴보면서 해당 테스트가 올바르게 작동됐는지 안됐는지 살펴보기 때문에 상태 검증이다.

예를 들면, 특정 api 호출이 제대로 작동됐는지에 대해서 살펴볼 때, 해당 함수가 몇 번이나 실행되는지 또는 어떤 인자와 함께 실행됐는지에 대해서 보단, 반환하는 결과값에 대한 검증만 한다.

Mcok

mock은 상호작용에 관한 것이다. mock을 사용할 때는 상태검증에 대해선 전혀 걱정하지 않는다. 대신 mock 객체가 얼마나 테스트 코드와 상호작용했는가에 집중한다.

예를 들면 특정 함수가 몇 번이나 실행됐는가, 또는 여러 개의 함수들이 일정한 순서대로 동작이 됐는가, 어떤 인자와 함께 실행됐는가를 살펴보는 데 집중한다.

Handling error with recoil and axios

leo — Sat, 20 Mar 2021 07:05:38 +0000

Axios

api 호출을 할 때마다 try and catch 를 사용해서 catch 구문에서 에러 핸들링을 하는 방법은 굉장히 번거로운 방법이다. axios의 interceptors 는 이름 그대로 then이나 catch로 응답이나 에러가 오는걸 가로챌 수가 있어서 에러 핸들링을 굉장히 편리하게 할 수가 있다.

  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse>;
  };

axios의 interceptors는 request 속성과 response 속성을 가지고 있는 객체이다. response의 타입을 보면 AxiosResponse를 제너릭 인자로 받는 AxiosInterceptorManager 객체이다.

interface AxiosInterceptorManager<V> {
  use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: any) => any): number;
  eject(id: number): void;
}

response의 use 메소드는 두 개의 함수를 인자로 받는다. 첫 번째 함수는 요청이 성공적이면 실행이 되고, 두번째 함수는 요청이 실패 했을 때 받는 함수로 에러가 나게 되면 이 함수가 실행된다.

 export const setupInterceptors = (): void => {
  axios.interceptors.response.use(
    (response) => response,
    (error) => {
      --에러처리를 하는구간--
    },
  );
};

setupInterceptors를 함수를 만들어서, 리엑트의 가상돔을 렌더링 해주는 index.tsx 파일에서 import를 해서 실행을 해준다.

이렇게 되면, 리엑트의 어느 api 호출하는 함수를 실행을 했는데 에러가 났다면, 컴포넌트에 있는 catch 구문에 에러가 전달되기 전에 미리 intercepts를 통해서 에러 핸들링을 할 수가 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import { setupInterceptors } from '@service/axios';

import App from './App';

setupInterceptors();

ReactDOM.render(
  <RecoilRoot>
    <App />
   </RecoilRoot>,
   document.getElementById('root'),
);

Change recoil state outside of React

1. RecoilExternalStatePortal

axios로 에러 핸들링을 하기 위해서는, 리엑트 바깥에서 recoil 스테이트를 업데이트해 주어야 한다. 이 부분을 해결하기 아래 링크에서 힌트를 얻어서 해결하게 됐다.

https://github.com/facebookexperimental/Recoil/issues/289

recoil은 redux처럼 Provider의 store를 통해서 state를 업데이트 할 수 있는 방법이 없기 때문에, RecoilExternalStatePortal(jsx를 리턴하는 함수)를 생성을 해서 안에 넣어준다. 이렇게 되면 RecoilExternalStatePortal 함수 안에서 recoil 훅들을 사용할 수 있다.

ReactDOM.render(
  <RecoilRoot>
    <RecoilExternalStatePortal />
      <App />
   </RecoilRoot>,
   document.getElementById('root'),
);

2. externalRecoilLoadable

export let externalRecoilLoadable: <T>(recoilValue: RecoilValue<T>) => Loadable<T> = null;

export let externalRecoilSet: <T>(recoilVal: RecoilState<T>, valOrUpdater: ((currVal: T) => T) | T) => void = null;

export function RecoilExternalStatePortal() {
  useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
    externalRecoilLoadable = snapshot.getLoadable;
  });

  useRecoilCallback(({ set }) => () => {
    externalRecoilSet = set;
  })();

  return <></>;

useRecoilTransactionObserver_UNSTABLE 훅의 콜백은 snapshot과 previousSnapshot을 속성으로 가진 객체를 인자로 받는다.

function useRecoilTransactionObserver_UNSTABLE(({
  snapshot: Snapshot,
  previousSnapshot: Snapshot,
}) => void)

Snapshot은 객체이며 getLoadable 이라는 메소드를 가지고 있다. getLoadable의 타입을 살펴보자.

 getLoadable<T>(recoilValue: RecoilValue<T>): Loadable<T>;

useRecoilTransactionObserver_UNSTABLE의 콜백은 최초 실행이 될때
externalRecoilLoadable 변수안에 스냅샷의 getLoadable 함수를 넣어준다. 이 콜백함수같은 리코일의 스테이트가 바뀔때마다 실행이 되기 때문에, 바뀐 스테이트에 대한 스냅샷이 계속 업데이트가 된다.

getLoadable은 Loadable이라는 객체를 리턴을 해준다. Loadabl 안에는 getValue라는 메소드가 있는데 이 메소드를 통해서 리코일 스테이트값에 접근을 할수가 있다.

useRecoilTransactionObserver_UNSTABLE의 콜백은 RecoilExternalStatePortal 실행이 될 때 최초 실행이 된다.

externalRecoilLoadable 변수안에 스냅샷의 getLoadable 함수를 넣어준다. 이 콜백함수는 리코일의 스테이트가 바뀔 때마다 실행이 되기 때문에, 바뀐 스테이트에 대한 스냅샷이 계속 업데이트가 된다.

3. externalRecoilSet

externalRecoilLoadable로 스테이트에 대한 접근을 할 수는 있지만, 아직 Recoil의 스테이트를 업데이트 할 수는 없다. 따라서 스테이트를 업데이트 할 수 있는 함수가 필요하다.

type CallbackInterface = {
  snapshot: Snapshot,
  gotoSnapshot: Snapshot => void,
  set: <T>(RecoilState<T>, (T => T) | T) => void,
  reset: <T>(RecoilState<T>) => void,
};

function useRecoilCallback<Args, ReturnValue>(
  callback: CallbackInterface => (...Args) => ReturnValue,
  deps?: $ReadOnlyArray<mixed>,
): (...Args) => ReturnValue

위의 있는 useRecoilCallbac은 유저가 넣은 콜백 함수를 실행하는 함수를 반환해준다. 유저의 콜백 함수를 감싸는 wrapper 함수가 CallbackInterface를 전달해줘서. 여기서 set 함수를 인자로 받는다.

콜백 함수 안에서 인자로 받은 set 함수를 externalRecoilSet 변수에 넣어준다. 이 set 함수는 첫 번째 인자로 리코일 상태 값을 받고, 두번째 인자로 업데이트할 상태 값을 넣어 줄 수가 있다.

useRecoilCallbac 에서 반환된 함수가 아직 실행되지 않았기 때문에 set 함수를 넣어주기 위해서는useRecoilCallbac을 실행해준다. 이렇게 되면 externalRecoilSet 변수에 set 함수를 넣어줄 수 있다.

에러핸들링

import { modalState } from '@state/modal';
import { externalRecoilLoadable, externalRecoilSet } from '../RecoilExternalStatePortal';

 export const setupInterceptors = (): void => {
  axios.interceptors.response.use(
    (response) => response,
    (error) => {
      const currentModalList = [...externalRecoilLoadable(modalState).getValue()];
      const newModalList = currentModalList.concat([
        {
          key: 'basicModal',
          props: { text: error.response.data.message }
        },
      ]);
      externalRecoilSet(modalState, newModalList);
    },
  );
};

RecoilExternalStatePortal 에서 externalRecoilLoadable 함수와 externalRecoilSet 함수를 임포트 해보자.
externalRecoilLoadable의 getValue를 통해서 recoil의 스테이트 값을 가져온다.
externalRecoilSet에 첫 번째 인자로 recoil 스테이트 갑을 넣어주고, 두 번째 인자로 업데이트할 valu값을 넣어서 업데이트 했다.

위의 예시 같은 경우는, 에러가 일어나면 interceptors에서 에러를 먼저 처리해서 에러로 받은 메시지 값을 보여주기 일괄적으로 보여주기 위해서 위와 같이 사용되었다.

Testing select option with React Testing Library

leo — Sun, 28 Feb 2021 12:58:06 +0000

이번 글은 셀렉트 박스를 react testing library를 통해서 어떻게 테스트하는지에 대한 포스트다.

react testing library는 Semantic HTML을 사용할수록 더 간편하게 query를 할 수가 있다. 아래의 Select 컴포넌트 같은 경우는 semantic 하게 html을 사용했기 때문에 label 태그와 같이 사용되었다.

import { FC } from 'react';

const Select: FC = () => {
  return (
    <div>
      <label htmlFor="language-select">
        Choose a country
        <select id="language-select">
          <option value="">choose a country</option>
          <option value="ko">한국</option>
          <option value="usa">미국</option>
        </select>
      </label>
    </div>
  );
};

export default Select;

import React from 'react';
import { render, screen, userEvent } from '@test-utils';
import Select from './Select';

test('default option should be falsy when different option is selected', () => {
  render(<Select />);
  const selectElement = screen.getByRole('combobox', { name: 'Choose a country' });
  userEvent.selectOptions(selectElement, 'usa');
  const defaultOption = screen.getByRole('option', { name: 'choose a country' }) as HTMLOptionElement;
  const selectedOption = screen.getByRole('option', { name: '미국' }) as HTMLOptionElement;
  expect(defaultOption.selected).toBeFalsy();
  expect(selectedOption.selected).toBeTruthy();
});

위의 테스트 코드는 짧지만, step by step으로 최대한 자세하게 설명을 해보겠다.

먼저 Select 컴포넌트를 렌더링을 시켜줘야 한다. render를 통해서 해당 컴포넌트를 렌더링했다.

react testing library의 Query는 여러 가지 종류가 있는데 공식 홈페이지에서 정해놓은 우선순위가 있다.

우선순위에서 1순위인 getByRole 쿼리 같은 경우는 DOM의 Accessibility tree 안에 있는 aria-role 을 통해서 DOM 접근을 한 다음에 해당 엘레멘트를 반환을 해준다.

select 태그의 role은 listbox 또는 combobox가 이고, multiple attribute가 사용되지 않고, size attribute가 없거나 또는 사이즈가 1보다 크지 않을 때에는 combobox로 분류가 된다.

Select 컴포넌트는 여러 개의 select 태그가 없기 때문에 getByRole 의 두 번째 인자인 option 객체를 통해서 다시 쿼리를 해줄 필요가 없다. 하지만 만약에 이 컴포넌트 안에서 여러개의 select 태그가 있으면 에러가 나게 된다.

이러면 두번째 인자로 옵션 객체의 name 속성을 이용해서. 다시 한 번 더 쿼리를 할 필요성이 있다. 화면에 표시되는 텍스트가 돔의 Accessibility tree의 name(레이블 텍스트: Choose a country)이 되기 때문에 옵션객채에 name속성을 넣어줘서 쿼리를 해준다.

만약에 semantic한 html을 사용하지 않았을 경우에는(label이 없이 select를 사용한 경우), aria-label attribute를 select 태그에 추가해주면 name으로 query가 가능하다. 다만 aria-label을 화면상에 보이는 label이 없는 경우에만 사용을 권장하고 또한 Accessibility Tree의 name을 덮어씌울 수 있기 때문에 무조건 사용해서는 안 된다.

이제 해당 Select 컴포넌트의 value를 바뀌기 위해서 이벤트를 실행해보아야 하는데, 공식 홈페이지에서 fireEvent 보다는 userEvent 사용을 권장하고 있기 때문에 userEvent를 사용해서 select의 value를 usa로 바꿔주었다.

다음 단계는 getByRole의 인자로 option을 넣어줘서 쿼리를 해준다. option엘레멘트의 role은 option이다. option 태그 또한 여러개기 때문에 옵션객체에 name을 이용해서 쿼리를 했다. 다만 get쿼리 같은 경우는 항상 타입을 HTMLElement를 반환하기 때문에 selected라는 속성이 없기 때문에 타입 assertion을 통해서 HTMLOptionElement를 반환을 했다.

자 이제 마지막으로 처음에 선택이 돼 있던 defaultOption의 selected 속성이 falsy인게 확인이 됐고, 새로 선택이 된selectedOption의 selected 속성이 truthy인걸 확인할 수 있다.

Recoil과 hook으로 global 모달 만들기

leo — Sun, 21 Feb 2021 12:35:45 +0000

최근에 회사에서 material UI를 사용해서 admin 사이트를 개발하고 있다. 백엔드에 api를 연동하기 전에 UI 작업을 하던 중에 모달을 사용하는 일이 많아져서, 글로벌 modal store를 만들어보게 됐다.

modal store가 필요한 이유?

사실 여러 개의 모달들을 하나의 공용 컴포넌트 모달로 계속 사용이 가능하다면 modal store가 필요할 이유는 굳이 없다. 다만 모달을 사용하게 되면 기본 모달이 아닌 커스텀 모달들이 계속 추가되는 경우가 많다.

예를 들면, 모달 안에 버튼이 4개가 들어간다든지, 아니면 사용자가 입력을 할 수 있는 input창이 필요 한다든지, 이미지를 렌더링해야 된다는 등등. 이런 모달들 같은 경우는 커스텀으로 따로 컴포넌트를 만들어서 관리를 해줘야 한다.

이렇게 만들어진 모달들을 렌더링을 하려면 보통 useState를 이용해서 모달의 state를 사용한다.

하지만 만약에 하나의 컴포넌트에서 4~5개의 모달이 사용된다고 가정을 해보자.

  const [isModalOpen, setModalOpen] = useState(false);
  const [isModal1Open, setModa1lOpen] = useState(false);
  const [isModal2Open, setModal2Open] = useState(false);
  const [isModal3Open, setModal3Open] = useState(false);
  const [isModal4Open, setModal4Open] = useState(false);

이런 식으로 일일이 모달의 state를 관리해줘야 해주고, 함수의 open 과 close에 관련된 함수들을 모달에 props로 내려줘야 된다. 이렇게 되면 컴포넌트가 관리해야 하는 state가 굉장히 많이 늘어나야 하고 결국 코드에 대한 가독성이 안 좋아지고 관리하기가 어려워진다.

또한 어떤 상황에서는 모달 안에서 다시 모달을 열어줘야되는 경우가 있을 수가 있으며, 모달안에서 다른 모달에게 props로 콜백 함수를 넘겨줘야 하는 경우도 있다.

이런 경우에 global로 modal store를 만들어서 한군데에서 모든 모달을 관리를 해주면 굉장히 편하게 사용을 할 수가 있다.

모달종류

먼저 모달들의 종류를 케이스 별로 나누어서 분리를 해봤다.

basicModal

가장 기본적인 모달이며, 텍스트 외에 특별하게 렌더링이 필요하지 않고, 확인 버튼을 누르면 닫히는 모달이다.

twoBtnModal

basicModal 버튼이 하나 더 추가된 모달이다. 오른쪽 버튼 같은 경우는 클릭이 됐으면 콜백 함수가 실행되면서 모달이 닫힌다.

customModal

위에 두 가지에 포함되지 않은 모달들이며, 이 모달들 같은 경우는 재사용이 불가능하기 때문에 각각 컴포넌트를 만들어 줘야 한다.

렌더링

글로벌 모달의 렌더링 같은 경우는 앱의 최상단인 App에서 에서 Modal를 import를 해올것이고 Modal 파일이 modalList를 가지고와서 map method로 렌더링을 해주는 방식으로 구현.

이렇게 Modal에서 리스트에 있는 모든 모달들이 렌더링이 될 것이다. 보통 모달을 렌더링할 때 isOpen이라는 boolean값으로 모달 렌더링을 제어를 하는데, 번거롭게 스테이트를 선언해서 넘겨줘야 하는 부분이 사라지게 된다.

import { FC } from 'react';
import { useRecoilState } from 'recoil';
import { modalState } from '@state/modal';
import BasicModal from '@molecules/modal/basicModal';
import TwoBtnModal from '@molecules/modal/twoBtnModal';
import { isBasicModal, isTwoBtnModal, isCustomModal } from '@typeGuard/guard';
import { customModal } from '@molecules/modal/customModal';

const Modal: FC = () => {
  const [modalList, setModalList] = useRecoilState(modalState);

  return (
    <div>
      {modalList.map(({ key, props }, index) => {
        if (isBasicModal(props)) {
          return <BasicModal {...props} key={key + String(index)} />;
        }

        if (isTwoBtnModal(props)) {
          return <TwoBtnModal {...props} key={key + String(index)} />;
        }

        if (isCustomModal(key)) {
          const CustomModal = customModal[key];
          return <CustomModal {...props} key={key} />;
        }

        return null;
      })}
    </div>
  );
};

export default Modal;

타입 가드 함수를 이용해서 props가 타입 추론이 안돼서 에러가 나는 부분을 해결했다. 커스텀 모달일 경우에는 customModal(컴포넌트가 저장되어 이는 객체), 해당 키값에 맞는 컴포넌트를 렌더링을 시켜줄 수 있게 했다.

사실 props를 내려줄 때 spread를 이용해서 내려주고 싶지 않았지만, spread를 사용해주지 않으면, 각각의 커스텀 모달에 맞는 타입 가드를 이용해서 타입 추론을 정확하게 시켜야 되서, 나중에 커스텀 모달이 많아지면, 그때마다 타입 가드를 넣어주고 if문을 써야 되기 때문에 고민 끝에 spread operaor를 사용했다.

다만 리엑트 공식 홈페이지에서는 spread 를 이용해서 props를 내려주는 걸 권장하지 않기 때문에, 이 부분은 다시 한번 생각해봐야 할 거 같다.

Modal Store

import { atom } from 'recoil';
import { Props as BasicMoalProps } from '@molecules/modal/basicModal';
import { Props as TwoBtnModalProps } from '@molecules/modal/twoBtnModal';
import { Props as UserBlockModalProps } from '@molecules/modal/customModal/userBlockModal';
import { CustomModalKey } from '@molecules/modal/customModal';

export type ModalKey = 'basicModal' | 'twoBtnModal' | CustomModalKey;
export type ModalProps = BasicMoalProps | TwoBtnModalProps | UserBlockModalProps;

export interface Modal {
  key: CustomModalKey | ModalKey;
  props: ModalProps;
}

export const modalState = atom<Modal[]>({
  key: 'modalState/modal',
  default: [],
});

recoil을 이용해서 글로벌 모달에 대한 state를 만들어줬다. 모달 리스트는 배열 안에 객체로 저장되는 형태이며, key와 props라는 속성을 가지고 있다.

key 같은 경우는 type을 이용해서 basicModal 과 twoBtnModal과 커스톰 모달들의 키값만 들어올 수 있게 제한을 해두었다. Prps같은 경우에도 basic과 twBtn 모달과 커스텀 모달의 props만 들어올 수 있도록 제한해 두었다.

만약에 커스텀 모달이 더 추가가 되면 각각의 props는 import 해와서 ModalProps에 추가를 해두어야 한다.

import React from 'react';
import UserBlockModal from './userBlockModal';

export const customModalKey = ['userBlockModal'] as const;
export type CustomModalKey = typeof customModalKey[number];

type CustomModal = {
  [key in CustomModalKey]: React.ElementType;
};

export const customModal: CustomModal = {
  userBlockModal: UserBlockModal,
};

위에 코드는 @customModal/index.ts 파일이다.

const assertions을 이용해서 커스텀 모달의 키값들을 배열 안에 넣어 두었다.
이 방법을 사용할 경우에 배열을 읽기 전용 tuple로 만들어 준다. 이 배열에 있는 값들을 union type으로 만들어 주기가 아주 편하다. const assertions에 대해서 자세히 알고 싶으면 아래 링크를 참조하면 된다.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html

customModal 객체안에는 커스텀 모달들의 키값들이 속성값이 되며 커스텀 컴포넌트들이 value로 저장이 된다.

useModal 훅

import { useRecoilState } from 'recoil';
import { modalState, Modal } from '@state/modal';

interface UseModal {
  addModal: ({ key, props }: Modal) => void;
  removeCurrentModal: () => void;
}

export default function useModal(): UseModal {
  const [modalList, setModalList] = useRecoilState(modalState);

  const addModal = ({ key, props }: Modal) => {
    const newModalList = [...modalList];
    newModalList.push({ key, props });
    setModalList(newModalList);
  };

  const removeCurrentModal = () => {
    const newModalList = [...modalList];
    newModalList.pop();
    setModalList(newModalList);
  };

  return {
    addModal,
    removeCurrentModal,
  };
}

모달을 추가하거나, 제거하는 함수 같은 경우는 재사용이 계속될 함수이므로 useModal이라는 커스텀 훅을 만들었다. 모달을 추가를 할 때는 key와 props가 있는 객체를 인자로 넣어주면 된다.

모달을 제거를 할 때는 따로 인자를 넣어줄 필요는 없다. 모달 리스트에서 가장 마지막에 있는 모달을 제거하기 때문에 현재 렌더링 되어있는 모달이 close가 된다.

만약에 redux를 사용하는 거라며 hook을 사용하기보다는, action 함수를 만들어서 dispatch를 실행해주면 된다.