javascript React Hook“useSelector”不能在顶层调用

kokeuurv  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(132)

大家好,我有mern堆栈项目使用redux工具包,并希望从客户端的服务器访问我的accessToken。我有一个apiCalls文件夹里面的文件夹我有一个axios。创建并希望在登录后访问accessToken并将令牌保存在redux状态,但当我试图调用useSelector来选择accessToken时,它显示错误React Hook“useSelector”不能在顶层调用。是否有其他方法可以访问jwt accessToken?我是新来的。谢谢
apiCalls:

import React from 'react';
import axios from 'axios';
import { useSelector } from 'react-redux';

const BASE_URL = "http://localhost:5000";

const user = useSelector((state) => state.user.accessToken);
const TOKEN = user; 

export const publicRequest = axios.create({
    baseURL: BASE_URL
})

export const userMethod = axios.create({
    baseURL: BASE_URL,
    headers: {token: `Bearer ${TOKEN}`}
})

userRedux:

import { createSlice } from '@reduxjs/toolkit'

const userSlice = createSlice({
    name: "user",
    initialState: {
       currentUser: null,
       isFetching: false,
       error: false
    },
    reducers: {
        loginStart: (state) => {
            state.isFetching = true;
        },
        loginSuccess: (state, action) => {
            state.isFetching = false;
            state.currentUser = action.payload;
        },
        loginFailure: (state) => {
            state.isFetching = false;
            state.error = true;
        },
        logout: (state) => {
            state.currentUser = null
        }
    }
})

export const { loginStart, loginSuccess, loginFailure, logout } = userSlice.actions
export default userSlice.reducer;
lnvxswe2

lnvxswe21#

您可以通过导入存储并调用getState方法来访问组件外部的存储。
请注意,导入商店通常会导致循环依赖,有一个关于此的redux FAQ页面。
我个人将store与axios拦截器结合导入,以便在每个请求之前修改header(因为如果令牌发生更改,在axios.create中设置header将不起作用)。我在索引中添加了我的拦截器。js,而不是在我声明axios示例的同一个模块中,只是为了避免循环导入依赖错误(一旦你在redux异步thunks等中引入API调用,就会发生这种错误)。)

vshtjzan

vshtjzan2#

只能在react函数组件中使用hook
useSelector是一个钩子

相关问题