mapDispatchToProps with react hooks

useMapDispatch.md

to avoid calling redux dispatch() coming from useDispatch directly in your components, you can simply create a wrapper over useDispatch that works similar to mapDispatchToProps in connect:

import { useDispatch, useSelector } from "react-redux";

export default function useMapDispatch(map) {
    const mapped = {};

    const dispatch = useDispatch();
    const state = useSelector((state) => state);

    for (const key in map) {
        mapped[key] = (...args) => map[key](...args)(dispatch, state);
    }
    
    return mapped;
}

then in your component:

// ...
const { fetchUser } = useMapDispatch({ fetchUser: fetchUserStore });

async function handleClick() {
  await fetchUser('USER_ID');
  console.log('user fetched');
}
// ...

and finally in the store function:

const fetchUserAsyncThunk = createAsyncThunk('fetchUser', async (userId) => {
  const response = await fetchUserApi(userId);
  return response.data
})

export function fetchUserStore(userId) {
  return (dispatch, state) => {
      return dispatch(fetchUserAsyncThunk(userId))
  }
}