Рефакторинг компонента на основе класса в функциональный компонент с помощью Redux и useDispatch не работает

Question

Я пытаюсь изучить useDispatch для рефакторинга компонента класса. Отправка работает иногда, но не другие. Пожалуйста, дайте мне знать, что я делаю не так ...

dev-tools:

component:

import React, { useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import {
    hideAllComps,
    newSearchLocation,
    logFullSearchName,
} from '../../../../actions';

function SearchBar() {

    const dispatch = useDispatch();
    const hideAllCompsState = useSelector((state) => state.hideOrShow);
    const currentLocation = useSelector((state) => state.location);
    const searchedLocation = useSelector((state) => state.searchedLocation);

....


function logNewSearchLocation(response) {
        dispatch(newSearchLocation(response));
        console.log(searchedLocation); // logs 'none'
    }

    function searchLocation(city) {
        let key = `XXX`;
        let coord = ['lat', 'lon'];
        let site = `XXX`;
        axios
            .get(site)
            .then((response) => {
                console.log(response); // results are there
                logNewSearchLocation(response);
            })
            .catch((err) => {
                alert(err);
            });
    }

My action:

export const newSearchLocation = (loc) => {
    return {
        type: 'NEW_SEARCH_LOCATION',
        payload: loc,
    };
};

мой редуктор:

import { combineReducers } from 'redux';

...

const searchedLocation = (loc = 'none', action) => {
    if (action.type === 'NEW_SEARCH_LOCATION') {
        return action.payload;
    } else {
        return loc;
    }
};

....
const weatherApp = combineReducers({
    ...
    searchedLocation: searchedLocation,
    ...
});

export default weatherApp;

он отлично работал с Redux в компоненте на основе классов, используя mapStateToProps и все такое. Я хочу научиться уходить от класса и заниматься крючками. Я очень ценю помощь ...