-1

I have created a custom hook in my nextjs app, where i create an axios instance. It looks as follows:

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

In the hook i want to use dispatch, but currently i get an error saying:

Error: could not find react-redux context value; please ensure the component is wrapped in a Provider

Marcus
  • 29
  • 1
  • 5

1 Answers1

0

I found out how to do it. I just imported my store and called dispatch on it:

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

store.dispatch(stopLoading())
Marcus
  • 29
  • 1
  • 5