大家好,我有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;
2条答案
按热度按时间lnvxswe21#
您可以通过导入存储并调用
getState
方法来访问组件外部的存储。请注意,导入商店通常会导致循环依赖,有一个关于此的redux FAQ页面。
我个人将store与axios拦截器结合导入,以便在每个请求之前修改header(因为如果令牌发生更改,在
axios.create
中设置header将不起作用)。我在索引中添加了我的拦截器。js,而不是在我声明axios示例的同一个模块中,只是为了避免循环导入依赖错误(一旦你在redux异步thunks等中引入API调用,就会发生这种错误)。)vshtjzan2#
只能在react函数组件中使用hook
useSelector是一个钩子