Вопрос пользователя:
Мы уже настроили весь флоу пользователя, но пока никак нельзя выйти из аккаунта.
Чтобы это стало возможно, необходимо добавить в слайс пользователя (/src/features/user/userSlice) экшен logout, который будет записывать в state.user значение null.
Теперь в обработчике onLogout в файле /src/components/Header нужно сделать 2 вещи:
удалить token из localStorage;
задиспатчить экшен logout в стор.
Далее наши защищенные роутеры самостоятельно отправят пользователей на страницу логина.
Новый экшен нужно не забыть заэкспортировать из слайса. А при его вызове необходимо задиспатчить его в стор.
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { getToken, getUser } from '../../api/user';
import { User } from '../../types';
export const loginUserThunk = createAsyncThunk(
'users/loginUser',
({login, password}: {login: string; password: string}) =>
getToken({login, password})
.then(token => {
localStorage.setItem('token', token);
return token;
}),
)
export const getUserThunk = createAsyncThunk(
'users/getUser',
({token}: {token: string}) =>
getUser({token}),
)
export interface UserState {
isInit: boolean;
isLoading: boolean;
user: User | null;
error: string | null;
}
const initialState: UserState = {
isInit: false,
isLoading: false,
user: null,
error: null,
}
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
init: (state) => {
state.isInit = true;
},
},
extraReducers: (builder) => {
builder.addCase(loginUserThunk.pending, (state) => {
state.isLoading = true;
});
builder.addCase(loginUserThunk.rejected, (state) => {
state.isLoading = false;
});
builder.addCase(loginUserThunk.fulfilled, (state) => {
state.isLoading = false;
});
builder.addCase(getUserThunk.pending, (state) => {
state.isLoading = true;
});
builder.addCase(getUserThunk.rejected, (state) => {
state.isInit = true;
state.isLoading = false;
});
builder.addCase(getUserThunk.fulfilled, (state, {payload}) => {
state.isInit = true;
state.isLoading = false;
state.user = payload;
});
}
});
export const {init} = userSlice.actions;
export default userSlice.reducer
import {useDispatch} from 'react-redux';
export const Header = () => {
const onLogout = () => {
};
return (
<header>
<button onClick={onLogout}>Выход</button>
</header>
)
};
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
import { useDispatch } from 'react-redux';
import { logout } from '../features/user/userSlice';
export const Header = () => {
const dispatch = useDispatch();
const onLogout = () => {
localStorage.removeItem('token');
dispatch(logout());
};
return (
<header>
<button onClick={onLogout}>Выход</button>
</header>
)
};