Использование redux thunk, не понятен принцип работы

не совсем понятен алгиртм работы redux thunk правильно ли построил логику
Пример получения данных с апи и рендеринг их:
Есть action:fetchData

import Service from "../services/Service";
.............
export const fetchData = () => {
  return async (dispatch) => {
    try {
      const service = new Service();
      dispatch({type:`ITEMS_REQUESTED`});
      const data = await service.fetchItem();
      dispatch({type: `ITEMS_LOADED`,payload: data});
    } catch (error) {
      dispatch({type:`ITEMS_ERROR`,payload: error,});
    }
  };
};

Далее есть ItemListContainer передающий данные в ItemsList:

import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";


import ItemsList from "./ItemsList";

import { fetchData } from "../../actions/actionUpdateItemList";

function ItemListContainer(props) {
  const { items, loading, error, dispatch } = props;

  return (
    <ItemsList
      items={items}
      loading={loading}
      error={error}
      fetchData={fetchData}
      dispatch = {dispatch}
    />
  );
}
const mapStateToProps = (state) => {
  return {
    items: state.UpdateItems.items,
    loading: state.UpdateItems.loading,
    error: state.UpdateItems.error,
  };
};
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    ...bindActionCreators({ fetchData }, dispatch),
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(ItemListContainer);

Ну и собственно сам ItemList:

import React from "react";

import SingleItemContainer from "../singleItem/SingleItemContainer";

import Spiner from "../spiner/Spiner";

function ItemsList(props) {
  const { items, loading, error, fetchData , dispatch } = props;
  React.useEffect(() => {
    let canceled = false;
    !canceled && dispatch( fetchData());
    return () => {
      canceled = true;
    };
  }, []);
  if (loading) {
    return <Spiner />;
  }
  if (error) {
    return (
      <div className="error-container">
        <i className="fas fa-exclamation-triangle"></i>
      </div>
    );
  }
  return (
    <ul className="item-list">
      {items.map((item) => {
        return (
          <li key={item.id} className="item">
            <SingleItemContainer item={item} />
          </li>
        );
      })}
    </ul>
  );
}

export default ItemsList;

В чем собственно вопрос? Если fetchData задавать том виде в котором он определен, то mapDispatchToProps испльзуется в виде функции, с использованием bindActionCreators и пробросом dispatch и приходится использовать thunk. Но если fetchData переписать

export const fetchData = async () => {
  const { dispatch } = store;
  try {
    const service = new Service();
    dispatch({type:`ITEMS_REQUESTED`});
    const data = await service.fetchItem();
     dispatch({type: `ITEMS_LOADED`,payload: data});
  } catch (error) {
    dispatch({type:`ITEMS_ERROR`,payload: error,});
  }
};

то mapDispatchToProps может быть объектом

const mapDispatchToProps = {
  fetchData,
};

и в ItemList просто вызываться.

!canceled && fetchData();

получается что два метода выдают один результат, но второй проще в написании, правильно ли я вобще рассуждаю?