CLAUDE.md

1# Store Directory (Redux Toolkit)
2 
3## Slice Structure
4 
5Each feature slice folder contains:
6 
7```
8featureName/
9├── Types.ts         # State and payload interfaces
10├── Slice.ts         # createSlice with reducers
11└── ThunkActions.ts  # Async thunk actions
12```
13 
14## State Interface Naming
15 
16Prefix with `i`, suffix with `State`:
17 
18```ts
19// Types.ts
20interface iAuthState {
21  user: iUser | null;
22  isAuthenticated: boolean;
23  isLoading: boolean;
24  error: string | null;
25}
26```
27 
28## Typed Hooks
29 
30Use typed hooks from store setup:
31 
32```ts
33import { useAppSelector, useAppDispatch } from "@/store/hooks";
34 
35const user = useAppSelector((state) => state.auth.user);
36const dispatch = useAppDispatch();
37```
38 
39## Slice Pattern
40 
41```ts
42// Slice.ts
43import { createSlice, PayloadAction } from "@reduxjs/toolkit";
44import { iAuthState } from "./Types";
45 
46const initialState: iAuthState = {
47  user: null,
48  isAuthenticated: false,
49  isLoading: false,
50  error: null,
51};
52 
53const authSlice = createSlice({
54  name: "auth",
55  initialState,
56  reducers: {
57    setUser: (state, action: PayloadAction<iUser>) => {
58      state.user = action.payload;
59      state.isAuthenticated = true;
60    },
61    clearUser: (state) => {
62      state.user = null;
63      state.isAuthenticated = false;
64    },
65  },
66  extraReducers: (builder) => {
67    // Handle async thunks here
68  },
69});
70 
71export const { setUser, clearUser } = authSlice.actions;
72export default authSlice.reducer;
73```
74 
75## Thunk Actions
76 
77```ts
78// ThunkActions.ts
79import { createAsyncThunk } from "@reduxjs/toolkit";
80import { authService } from "@/services/api/authService";
81 
82export const loginUser = createAsyncThunk(
83  "auth/login",
84  async (credentials: iLoginCredentials, { rejectWithValue }) => {
85    try {
86      const response = await authService.login(credentials);
87      return response.data;
88    } catch (error) {
89      return rejectWithValue(error.message);
90    }
91  }
92);
93```
94 
95## Normalized Data
96 
97For collections, use normalized shape:
98 
99```ts
100interface iEntitiesState<T> {
101  byId: Record<string, T>;
102  allIds: string[];
103}
104```
105