use-bind-action-creator.ts

import { useCallback } from 'react'
import { ActionCreator, bindActionCreators } from 'redux'
import { useDispatch } from 'react-redux'

export const useBindActionCreator = <DispatchAction>() => {
    const dispatch = useDispatch<(action: DispatchAction) => void>()

    return <A, C extends ActionCreator<A>>(actionCreator: C) => 
        useCallback(
            bindActionCreators(actionCreator, dispatch),
            [dispatch]
        )
}

/* Example usage:
  
  type MyComponentActions = FetchData | FetchMoreData
  
  const MyComponent: ReactFunctionComponent = () => {
    const bindActionCreator = useBindActionCreator<MyComponentActions>()
    
    const fetchData = bindActionCreator(MyActionCreators.fetchData)
    const fetchMoreData = bindActionCreator(MyActionCreators.fetchMoreData)
  
    return (
      <div>
        <button onClick={fetchData}>Fetch some data!</button>
        <button onClick={fetchMoreData}>Fetch some <b>more data</b>!</button>
      </div>
    )
  }
  
*/