Swaerok

Потому что useAction() возвращает не ту же самую функцию, а функцию забинденную на dispatch и выглядит это примерно вот так:

function bindActionCreator(actionCreator, dispatch) {
  return function () {
    return dispatch(actionCreator.apply(this, arguments));
  };
}

то есть по ключу fetchTodos лежит уже вызванная функция bindActionCreator(fetchTodos, dispatch) , и вызывая fetchTodos вы по сути вызываете вот этот участок:

function () {
    return dispatch(actionCreator.apply(this, arguments));
  };

надеюсь, понятно объяснил. Но лучше вывести самому в консоль лог и изучить.

Проблема в том, что вы используете и изменяете чужое решение не разобравшись толком, а как оно вообще работает. Как следствие, причину ищите не там. У вас сервер, webpack dev server в вашем случае, обрабатывает только '/'.
Добавьте следующие строки в конфиг:

module.exports = {
  /* ... */
  output: {
     /* ... */
    publicPath: '/'
  },
   /* ... */
  devServer: {
    historyApiFallback: true,
  },
};

Вместо добавления блока devServer можно изменить скрипт start в package.json:

"start": "webpack-dev-server --mode development --open --hot --history-api-fallback",

Документация.