create-kalp-boilerplate/templates/auth/redux/User/authSlice.ts

A Kalp CLI tool to generate a React boilerplate

import { ApiClient } from '../../services/api/api-client';
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { clearStorageAndRedirect } from '../../helpers/utils';
import { API_ENDPOINTS } from '../../services/api/config';

// Define types
interface User {
  id: string;
  name: string;
  email: string;
  // Add more fields as necessary
}

interface UserState {
  user: User | null;
  loading: boolean;
  error: string | null;
}

// Initial state
const initialState: UserState = {
  user: null,
  loading: true,
  error: null,
};

// Define API responses
interface ApiResponse<T> {
  result: T;
}

// Async thunks
export const getUserProfile = createAsyncThunk<User, void>(
  'user/profile',
  async () => {
    const response = await ApiClient.get<ApiResponse<User>>(
      API_ENDPOINTS.AUTH.GET_USER_PROFILE
    );
    return response.data.result;
  }
);

export const logout = createAsyncThunk<void, void>('user/logout', async () => {
  await ApiClient.get(API_ENDPOINTS.AUTH.LOGOUT_USER);
});

// User slice
const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {}, // Add any synchronous reducers if needed
  extraReducers: (builder) => {
    builder
      .addCase(getUserProfile.pending, (state) => {
        state.loading = true;
      })
      .addCase(
        getUserProfile.fulfilled,
        (state, action: PayloadAction<User>) => {
          state.loading = false;
          state.user = action.payload;
          localStorage.setItem('userId', action.payload.id);
        }
      )
      .addCase(getUserProfile.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Failed to fetch user profile';
      })
      .addCase(logout.fulfilled, (state) => {
        clearStorageAndRedirect();
        state.user = null;
        state.loading = false;
      });
  },
});

export default userSlice.reducer;