在 axios 拦截器中使用状态

时间:2021-03-16 17:03:27

标签: reactjs react-native axios interceptor use-reducer

我正在尝试优化我的应用程序的性能,并且正在考虑实现 axios 拦截器。

尝试这样做时,我遇到了我无法理解的问题。

这是我的 App.js 文件:

function App() {
const Stack = createStackNavigator();

const initialLoginState = {
    isLoading: true,
    userToken: null,
};


const loginReducer = (prevState, action) => {
    switch (action.type) {
        case 'RETRIEVE_TOKEN':
            return {
                ...prevState,
                userToken: action.token,
                isLoading: false,
            };
        case 'LOGIN':
            return {
                ...prevState,
                userToken: action.token,
                isLoading: false,
            };
        case 'LOGOUT':
            return {
                ...prevState,

                userToken: null,
                isLoading: false,
            };
    }
};
const [loginState, dispatch] = useReducer(loginReducer, initialLoginState);

const authContext = useMemo(
    () => ({
        signIn: async (userToken) => {
            await setStoredItem('token', userToken);
            dispatch({type: 'LOGIN', token: userToken});
        },
        signOut: async () => {
            await deleteStoredItem('token');
            dispatch({type: 'LOGOUT'});
        },
    }),
    [],
);


useEffect(() => {
    setTimeout(async () => {
        let userToken = null;
        let token = await getStoredItem('token');

        if (token != undefined && token.length > 0) {
            userToken = token;
        }

        dispatch({type: 'RETRIEVE_TOKEN', token: userToken});
    }, 1000);
}, []);

axios.interceptors.request.use((config) => {
    console.log(
        'loginState.userToken INSIDE intercetor',
        loginState.userToken,
    );
    // request.headers.Authorization = loginState.userToken ? `Bearer ${userToken}` : '';
    return config;
});
console.log('state OUTSIDE intercetor', loginState.userToken);

如您所见,我使用 useReducer react hook 进行身份验证状态管理,然后根据 loginState.userToken !== null 与否有条件地呈现路由。

我试图将 loginState.userToken 添加到拦截器(注释掉代码),然后发生了一些奇怪的事情 - 状态值似乎发生了变化,我不知道为什么。 请看下面的截图: enter image description here

起初是准确的(实际令牌),但后来变为空?

我在这里遗漏了什么?

谢谢!

0 个答案:

没有答案