Предотвратить несколько выборок, когда несколько компонентов используют одни и те же крючки React - PullRequest
Новая
       1

Предотвратить несколько выборок, когда несколько компонентов используют одни и те же крючки React

0 голосов
/ 10 мая 2019

Как я могу предотвратить несколько выборок данных, когда этот хук используется в нескольких компонентах? Нет необходимости в его повторном получении, когда URL-адрес остается прежним, только при изменении searchQuery. Я также хочу иметь возможность вызывать loadPeople() с параметрами во всех компонентах.

Я пытался проверить, было ли заполнено people.data перед выполнением fetchData(), но loadPeople() никогда больше не будет работать. 

type UseStarWarsProps = {
    people: AsyncData<ApiStarWarsPerson[]>;
    loadPeople: (query?: string) => void;
};

export const useStarWars = (): UseStarWarsProps => {
    const [searchQuery, setSearchQuery] = useState('');
    const people: AsyncData<ApiStarWarsPerson[]> = useSelector((state: RootState) => state.starWars.people);
    const apiProxy: ApiProxyType = ApiProxy();
    let dispatch = useDispatch();

    const fetchData = async () => {
        dispatch(setLoaderStarWarsAction());
        try {
            const data = await apiProxy.getStarWarsPeople(searchQuery);
            dispatch(setStarWarsAction(data.results));
        } catch (e) {
            dispatch(setErrorStarWarsAction(e));
        }
    };

    useEffect(() => {
        fetchData();
    }, [searchQuery]);

    const loadPeople = (query?: string) => {
        setSearchQuery(query || '');
    };

    return { people, loadPeople };
};
...