Cursor rule

1---
2description:
3globs:
4alwaysApply: false
5---
6# 状态管理规范
7 
8## 1. Redux Toolkit 使用规范
9```typescript
10// features/auth/authStore.ts
11import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
12 
13// 异步 action
14export const fetchUserInfo = createAsyncThunk(
15  'user/fetchUserInfo',
16  async (userId: string) => {
17    const response = await fetchUserById(userId);
18    return response.data;
19  }
20);
21 
22// slice 定义
23const userSlice = createSlice({
24  name: 'user',
25  initialState: {
26    userInfo: null,
27    loading: false,
28    error: null,
29  },
30  reducers: {
31    clearUser: (state) => {
32      state.userInfo = null;
33    },
34  },
35  extraReducers: (builder) => {
36    builder
37      .addCase(fetchUserInfo.pending, (state) => {
38        state.loading = true;
39      })
40      .addCase(fetchUserInfo.fulfilled, (state, action) => {
41        state.loading = false;
42        state.userInfo = action.payload;
43      })
44      .addCase(fetchUserInfo.rejected, (state, action) => {
45        state.loading = false;
46        state.error = action.error.message;
47      });
48  },
49});
50 
51export const { clearUser } = userSlice.actions;
52export default userSlice.reducer;
53```
54 
55## 2. 状态管理最佳实践
56- 使用 `createSlice` 定义状态和 reducers
57- 异步操作使用 `createAsyncThunk`
58- 避免在组件中直接修改状态
59- 使用 `useSelector` 获取状态，`useDispatch` 派发 action
60