使用 nextjs 应用程序在自定义钩子中访问 redux 工具包调度答案

【问题标题】：Access redux toolkit dispatch in custom hook with nextjs app使用 nextjs 应用程序在自定义钩子中访问 redux 工具包调度
【发布时间】：2022-09-14 19:52:39
【问题描述】：

我在我的 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

在钩子中我想使用调度，但目前我收到一条错误消息：

错误：找不到 react-redux 上下文值；请确保组件被包装在一个 Provider 中

标签： reactjs next.js axios redux-toolkit react-custom-hooks

【解决方案1】：

我发现了如何做到这一点。我刚刚导入了我的商店并调用了 dispatch：

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

store.dispatch(stopLoading())

【讨论】：