add userSlice

src/app/slices/userSlice.ts

+import { createAction, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { AppThunk } from '../../app/store';
+
+interface UserState {
+ name?: string;
+ email?: string;
+ isLoggingIn?: boolean;
+ loggingError?: string;
+ isLoggedOut?: boolean;
+}
+
+interface UserInfo {
+ name: string;
+ email: string;
+}
+
+interface UserError {
+ error: string;
+}
+
+const initialState: UserState = {
+ name: '',
+ email: '',
+ isLoggingIn: false,
+ loggingError: '',
+ isLoggedOut: true
+}
+
+const loginRequest = createAction('user/login');
+const loginSuccess = createAction('user/login/success', function prepare(info: UserInfo) {
+ return {
+ payload: info
+ }
+});
+const loginFailure = createAction('user/login/failure', function prepare(error: UserError) {
+ return {
+ payload: error
+ }
+});
+const logout = createAction('user/logout');
+
+export const userSlice = createSlice({
+ name: 'user',
+ initialState,
+ reducers: {
+ [loginRequest]: (state, action) => {
+ return {
+ isLoggingIn: true
+ }
+ },
+ [loginSuccess]: (state, action: PayloadAction<UserInfo>) => {
+ return {
+ isLoggingIn: false,
+ isLoggedOut: false,
+ name: action.payload.name,
+ email: action.payload.email
+ }
+ },
+ [loginFailure]: (state, action: PayloadAction<UserError>) => {
+ return {
+ loggingError: action.payload.error
+ }
+ }
+ [logout]: (state, action) => {
+ return {
+ isLoggedOut: true
+ }
+ }
+ },
+})
+
+interface LoginRequestPayload {
+ username: string;
+ password: string;
+}
+
+export const userLogin = (payload: LoginRequestPayload): AppThunk => dispatch => {
+ dispatch(loginRequest)
+ setTimeout(() => {
+ dispatch(loginSuccess({name: payload.username, email: '[email protected]'}));
+ }, 2000);
+};
+
+export const userLogout = (): AppThunk => dispatch => {
+ setTimeout(() => {
+ dispatch(logout)
+ }, 1000)
+}