0

Проблема преследует меня достаточно давно и не могу найти решения в интернете.

Она заключается в том, как использовать Redux Toolkit в отдельной функции (вне компонента React). К примеру, есть компонент Weather.js, для удобства, я вывожу из него функцию, отвечающую за запрос к API. Я импортирую эту функцию в компонент и получаю данные.

Но бывают случаи, когда мне нужно сделать dispatch в выведенной из компонента функции (к примеру, надо сделать dispatch и остановить loader крутилку по окончанию запроса API). Хук - const dispatch = useAppDispatch() работает только в компонентах React.

Отсюда я вижу два решения: либо использовать кастомные хуки (склоняюсь к нему, но пока не нашел хорошего решения); либо использовать нативный Redux плюс Redux-Toolkit.

Ищу хорошее решение или как говорят best practices.

P.S. Заранее спасибо за ответы)

1
  • Это не проблема, это говорит о том, что вы пока не осмыслили идеологию реакта. Все что происходит с реакт-компонентами и его состоянием, должно происходить внутри компонентов и компоненты должны знать об этих изменениях. Вмешиваться в работу компонента из вне - не правильно. Если даже вы вынесли часть кода за пределы компонента, то верните нужные данные из функции в компонент и вызовите диспач. Либо создайте один верхнеуровневый компонент обертку и всю логику вызовово апи перенесите туда. пусть он вызывает, получает и диспатчит данные, а уже компоненты следят за изменением стейта.
    – SwaD
    15 сен в 12:46

1 ответ 1

0

Вы пишете, что импортируете функцию в компонент, значит и вызываете её из него? В самом компоненте вам доступен dispatch. То есть в компоненте вы пишете к примеру:

const dispatch = useAppDispatch();
//вызов необходимой функции
dispatch(getSomeRequest());

//сама функция где бы она не находилась
export const getSomeRequest = () => {
    return async (dispatch) => {
        try {
            dispatch(startLoading());
            const response = await api.get('/someApi/');
            dispatch(responseSuccess(response.data));
            dispatch(stopLoading());            
        } catch (message) {
            console.log('error', message);
        }
    }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.