State Management

The application uses Redux Toolkit and RTK Query for state management and data fetching.

Redux Store Configuration

The store integrates both local slices and multiple API slices to manage state across different features of the application.


// src/redux/store.ts
export const store = configureStore({
  reducer: {
    [configSlice.name]: configSlice.reducer,
    [mediaSlice.name]: mediaSlice.reducer,
    [api.reducerPath]: api.reducer,
    [packageSlice.name]: packageSlice.reducer,
    [githubApi.reducerPath]: githubApi.reducer,
    [gitlabApi.reducerPath]: gitlabApi.reducer,
    gitMeta: gitMetaReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }).concat(githubApi.middleware, gitlabApi.middleware, api.middleware),
  devTools: process.env.NODE_ENV !== "production",
});

API Slice Architecture

The core API slice uses a custom axiosBaseQuery that handles global API URL configuration and credentials (for cookie-based authentication with better-auth).


// src/redux/features/api-slice.ts
const axiosBaseQuery = ({ baseUrl, withCredentials }) => 
  async ({ url, method, data, params, headers }) => {
    try {
      const result = await axios({
        url: baseUrl + url,
        method,
        data,
        params,
        headers,
        withCredentials,
      });
      return { data: result.data.result || result.data };
    } catch (axiosError) {
      // Handles Axios error states
    }
  };
 
export const api = createApi({
  reducerPath: "api",
  tagTypes: ["Orgs", "Org", "Projects", "Project", "Providers", "package", "User", "ProjectLog"],
  baseQuery: axiosBaseQuery({ baseUrl: API_URL!, withCredentials: true }),
  endpoints: (_builder) => ({}),
});

Feature-Specific Slices

The application separates API logic into specialized slices:

Core API (api-slice.ts): The central gateway for organizations, projects, user profiles, and subscription data.
GitHub API (github-api.ts): Low-level repository interactions via Octokit, including tree management and multi-file commits.
GitLab API (gitlab-api.ts): OAuth-based repository interactions, specifically tailored for GitLab’s API structure.
Project Logic Slices: Specialized slices for Project Logs, User Logs, and User Personas, ensuring a scalable and auditable system.
UI & Config Slices: Local state management for site-specific settings (configSlice), media gallery state (mediaSlice), and active subscription status (packageSlice).