I amm learning React and i came across https://redux.js.org/usage/writing-logic-thunks.

I have an click event (onFetchClicked ) which call action ( dispatch(fetchTodoById(todoId)) ).

I am not able to understand why dispatch has to be used to enclose the function call. dispatch (fetchTodoById(todoId))

it should be called as fetchTodoById(todoId)

Functional Component:

function TodoComponent({ todoId }) {
  const dispatch = useDispatch()

  const onFetchClicked = () => {
    // Calls the thunk action creator, and passes the thunk function to dispatch
    dispatch(fetchTodoById(todoId))
  }
}

Action:

export const fetchTodoById = todoId => async dispatch => {
  const response = await client.get(`/fakeApi/todo/${todoId}`)
  dispatch(todosLoaded(response.todos))
}