[React] useActions util Hook

이번 글에서는 여러개의 액션을 사용할 경우 코드를 더 깔끔하게 쓸 수 있는 useActions hook을 사용해보려고 한다.

lib/useActions.js 선언

import { bindActionCreators } from 'redux';
import { useDispatch } from 'react-redux';
import { useMemo } from 'react';

export default function useActions(actions, deps) {
  const dispatch = useDispatch();
  return useMemo(
    () => {
      if (Array.isArray(actions)) {
        return actions.map((a) => bindActionCreators(a, dispatch));
      }
      return bindActionCreators(actions, dispatch);
    },
    deps ? [dispatch, ...deps] : deps
  );
}

위의 코드는 액션 생성 함수를 액션을 디스패치 하는 함수로 변환시켜준다

1 par : 액션 생성 함수로 이루어진 배열 (ex : [onChagnexxx, onToggle]
2par : deps 배열 : 이 배열이 바뀌면 액션을 디스패치하는 함수를 새로 만듦