Site Configuration

Configuration State Management

Config Slice Overview

The config slice (src/redux/features/config/slice.ts) is the central state management system for application configuration. It handles repository settings, user authentication, content structure, and UI preferences throughout the entire application.

Config Actions & Reducers

updateConfig - Partial configuration updates


// How it works: Merges new configuration with existing state
dispatch(
  updateConfig({
    repo: "my-website",
    branch: "main",
    content: { root: "content" },
  })
);
 
// Implementation:
updateConfig: (state, action: PayloadAction<Partial<IConfig>>) => {
  return {
    ...state,
    ...action.payload, // Shallow merge with new values
  };
};

resetConfig - Reset to initial state


// How it works: Restores all configuration to default values
dispatch(resetConfig());
 
// Use cases:
// - User logout
// - Repository switching
// - Error recovery

setRawMode - Toggle raw editing mode


// How it works: Switches between visual and raw code editing
dispatch(setRawMode(true)); // Enable raw mode
dispatch(setRawMode(false)); // Enable visual mode
 
// Implementation:
setRawMode: (state, action: PayloadAction<boolean>) => {
  state.isRawMode = action.payload;
};

Using useSelector Hook (Recommended)**


import { useSelector } from "react-redux";
import { RootState } from "@/redux/store";
 
// Get entire config object
const config = useSelector((state: RootState) => state.config);
 
// Get specific config values
const { repo, branch, userName } = useSelector(
  (state: RootState) => state.config
);
 
// Get nested config values
const contentRoot = useSelector(
  (state: RootState) => state.config.content.root
);
const mediaPublic = useSelector(
  (state: RootState) => state.config.media.public
);