State Management

Redux Store Configuration


// 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,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }).concat(githubApi.middleware, api.middleware),
  devTools: process.env.NODE_ENV !== "production",
});

API Slice Architecture

The application uses RTK Query for all API operations:


// src/redux/features/api-slice.ts
const baseQuery = async ({ url, method, data, params }, { getState }) => {
  const { user } = await getSession();
  const requestHeaders = {
    "Content-Type": "application/json",
    authorization_token: `Bearer ${process.env.NEXT_PUBLIC_BEARER_TOKEN}`,
    user_id: user?.id,
  };
 
  const result = await axios({
    url: process.env.NEXT_PUBLIC_BACKEND_URL + url,
    method,
    data,
    params,
    headers: requestHeaders,
  });
 
  return { data: result.data.result || result.data };
};
 
export const api = createApi({
  reducerPath: "api",
  baseQuery,
  tagTypes: ["User", "Org", "Project", "Package", "Subscription"],
  endpoints: () => ({}),
});

Feature-Specific Slices

Each major feature has its own API slice:

Content API: GitHub content operations
Commit API: Git commit operations
Project API: Project CRUD operations
Organization API: Organization management
User API: User management
Package API: Subscription management