Доступ к отправке инструментария redux в пользовательском хуке с помощью приложения nextjs

Я создал собственный хук в своем приложении nextjs, где я создаю экземпляр axios. Это выглядит следующим образом:

import axios from 'axios';
import { useRouter } from 'next/router'
import { useAppDispatch } from '../store/hooks'
import { stopLoading } from '../store/features/loadingSlice'

const useAxiosInstance = () => {
    const dispatch = useAppDispatch()

    const router = useRouter()

    const instance = axios.create({
        baseURL: 'http://localhost:4000'
    });

    instance.defaults.withCredentials = true
    instance.interceptors.response.use((response) => {
        return response
    }, (error) => {
        if (error.response.status === 401 && window.location.href !== 'http://localhost:3000/') {
            router.push('/')
            dispatch(stopLoading())
        }
        return Promise.reject(error)
    })

    return instance
}

export default useAxiosInstance

В хуке я хочу использовать диспетчеризацию, но в настоящее время я получаю сообщение об ошибке:

Ошибка: не удалось найти значение контекста реакции-редукции; Пожалуйста, убедитесь, что компонент завернут в Provider

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я узнал, как это сделать. Я только что импортировал свой магазин и вызвал для него отправку:

import { store } from '../store/store'

store.dispatch(stopLoading())

Другие вопросы по теме