autoworkflow 3.1.5 → 3.5.0

package/.claude/skills/state-redux.md

@@ -0,0 +1,337 @@
+# Redux Toolkit Skill
+
+## Store Setup
+\`\`\`typescript
+// store/index.ts
+import { configureStore } from '@reduxjs/toolkit';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import userReducer from './userSlice';
+import postsReducer from './postsSlice';
+
+export const store = configureStore({
+  reducer: {
+    user: userReducer,
+    posts: postsReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        // Ignore these paths in the state
+        ignoredPaths: ['user.lastLogin'],
+      },
+    }),
+  devTools: process.env.NODE_ENV !== 'production',
+});
+
+// Infer types from store
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+// Typed hooks
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+\`\`\`
+
+## Slice Pattern
+\`\`\`typescript
+// store/userSlice.ts
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './index';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+interface UserState {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: UserState = {
+  user: null,
+  loading: false,
+  error: null,
+};
+
+// Async thunk
+export const fetchUser = createAsyncThunk(
+  'user/fetchUser',
+  async (userId: string, { rejectWithValue }) => {
+    try {
+      const response = await fetch(\`/api/users/\${userId}\`);
+      if (!response.ok) throw new Error('User not found');
+      return response.json();
+    } catch (error) {
+      return rejectWithValue((error as Error).message);
+    }
+  }
+);
+
+export const updateUser = createAsyncThunk(
+  'user/updateUser',
+  async ({ id, data }: { id: string; data: Partial<User> }, { rejectWithValue }) => {
+    try {
+      const response = await fetch(\`/api/users/\${id}\`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      return response.json();
+    } catch (error) {
+      return rejectWithValue((error as Error).message);
+    }
+  }
+);
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<User>) => {
+      state.user = action.payload;
+    },
+    clearUser: (state) => {
+      state.user = null;
+      state.error = null;
+    },
+    updateUserField: (state, action: PayloadAction<{ field: keyof User; value: string }>) => {
+      if (state.user) {
+        state.user[action.payload.field] = action.payload.value;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // fetchUser
+      .addCase(fetchUser.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(fetchUser.fulfilled, (state, action) => {
+        state.user = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchUser.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload as string;
+      })
+      // updateUser
+      .addCase(updateUser.fulfilled, (state, action) => {
+        state.user = action.payload;
+      });
+  },
+});
+
+export const { setUser, clearUser, updateUserField } = userSlice.actions;
+export default userSlice.reducer;
+
+// Selectors
+export const selectUser = (state: RootState) => state.user.user;
+export const selectUserLoading = (state: RootState) => state.user.loading;
+export const selectUserError = (state: RootState) => state.user.error;
+export const selectIsLoggedIn = (state: RootState) => !!state.user.user;
+\`\`\`
+
+## Using in Components
+\`\`\`tsx
+import { useAppDispatch, useAppSelector } from '../store';
+import { fetchUser, selectUser, selectUserLoading, clearUser } from '../store/userSlice';
+
+function UserProfile({ userId }: { userId: string }) {
+  const dispatch = useAppDispatch();
+  const user = useAppSelector(selectUser);
+  const loading = useAppSelector(selectUserLoading);
+
+  useEffect(() => {
+    dispatch(fetchUser(userId));
+  }, [dispatch, userId]);
+
+  const handleLogout = () => {
+    dispatch(clearUser());
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (!user) return <div>No user</div>;
+
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <button onClick={handleLogout}>Logout</button>
+    </div>
+  );
+}
+\`\`\`
+
+## RTK Query (Data Fetching)
+\`\`\`typescript
+// store/api.ts
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export const api = createApi({
+  reducerPath: 'api',
+  baseQuery: fetchBaseQuery({
+    baseUrl: '/api',
+    prepareHeaders: (headers, { getState }) => {
+      const token = (getState() as RootState).auth.token;
+      if (token) {
+        headers.set('Authorization', \`Bearer \${token}\`);
+      }
+      return headers;
+    },
+  }),
+  tagTypes: ['User', 'Post'],
+  endpoints: (builder) => ({
+    // Query endpoint
+    getUser: builder.query<User, string>({
+      query: (id) => \`/users/\${id}\`,
+      providesTags: (result, error, id) => [{ type: 'User', id }],
+    }),
+
+    getUsers: builder.query<User[], void>({
+      query: () => '/users',
+      providesTags: (result) =>
+        result
+          ? [...result.map(({ id }) => ({ type: 'User' as const, id })), 'User']
+          : ['User'],
+    }),
+
+    // Mutation endpoint
+    createUser: builder.mutation<User, Partial<User>>({
+      query: (body) => ({
+        url: '/users',
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: ['User'],
+    }),
+
+    updateUser: builder.mutation<User, { id: string; data: Partial<User> }>({
+      query: ({ id, data }) => ({
+        url: \`/users/\${id}\`,
+        method: 'PATCH',
+        body: data,
+      }),
+      invalidatesTags: (result, error, { id }) => [{ type: 'User', id }],
+    }),
+
+    deleteUser: builder.mutation<void, string>({
+      query: (id) => ({
+        url: \`/users/\${id}\`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: (result, error, id) => [{ type: 'User', id }],
+    }),
+  }),
+});
+
+export const {
+  useGetUserQuery,
+  useGetUsersQuery,
+  useCreateUserMutation,
+  useUpdateUserMutation,
+  useDeleteUserMutation,
+} = api;
+
+// Add to store
+export const store = configureStore({
+  reducer: {
+    [api.reducerPath]: api.reducer,
+    // ... other reducers
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(api.middleware),
+});
+\`\`\`
+
+## RTK Query Usage
+\`\`\`tsx
+function UserList() {
+  const { data: users, isLoading, error, refetch } = useGetUsersQuery();
+  const [createUser, { isLoading: isCreating }] = useCreateUserMutation();
+
+  const handleCreate = async () => {
+    try {
+      await createUser({ email: 'new@example.com', name: 'New User' }).unwrap();
+    } catch (error) {
+      console.error('Failed to create user:', error);
+    }
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error loading users</div>;
+
+  return (
+    <div>
+      <button onClick={handleCreate} disabled={isCreating}>
+        Add User
+      </button>
+      <button onClick={refetch}>Refresh</button>
+      {users?.map((user) => (
+        <UserCard key={user.id} user={user} />
+      ))}
+    </div>
+  );
+}
+
+function UserCard({ user }: { user: User }) {
+  const [updateUser] = useUpdateUserMutation();
+  const [deleteUser] = useDeleteUserMutation();
+
+  return (
+    <div>
+      <span>{user.name}</span>
+      <button onClick={() => updateUser({ id: user.id, data: { name: 'Updated' } })}>
+        Edit
+      </button>
+      <button onClick={() => deleteUser(user.id)}>Delete</button>
+    </div>
+  );
+}
+\`\`\`
+
+## Selectors with Reselect
+\`\`\`typescript
+import { createSelector } from '@reduxjs/toolkit';
+
+// Memoized selector
+export const selectUserPosts = createSelector(
+  [selectUser, (state: RootState) => state.posts.items],
+  (user, posts) => posts.filter((post) => post.authorId === user?.id)
+);
+
+// Parameterized selector
+export const makeSelectPostsByCategory = () =>
+  createSelector(
+    [(state: RootState) => state.posts.items, (_, category: string) => category],
+    (posts, category) => posts.filter((post) => post.category === category)
+  );
+
+// Usage
+const userPosts = useAppSelector(selectUserPosts);
+const selectPostsByCategory = useMemo(makeSelectPostsByCategory, []);
+const techPosts = useAppSelector((state) => selectPostsByCategory(state, 'tech'));
+\`\`\`
+
+## ❌ DON'T
+- Mutate state outside of reducers
+- Put non-serializable values in state (functions, class instances)
+- Use createAsyncThunk for simple fetches (use RTK Query)
+- Create selectors inside components (causes re-renders)
+- Dispatch in reducers
+
+## ✅ DO
+- Use RTK Query for data fetching
+- Create typed hooks (useAppDispatch, useAppSelector)
+- Use createSelector for derived data
+- Keep state normalized (by ID)
+- Use PayloadAction for typed action payloads
+- Handle all async states (pending, fulfilled, rejected)