How to Generate Redux Toolkit Code with Cursor

1---
2description: Redux Toolkit conventions
3globs: "*slice.ts,*store.ts,*thunk.ts"
4alwaysApply: true
5---
6
7# Redux Toolkit Rules
8- ALWAYS use createSlice for reducer logic (never switch statements)
9- ALWAYS use createAsyncThunk for async operations
10- ALWAYS use PayloadAction<T> for typed action payloads
11- ALWAYS use typed hooks: useAppSelector, useAppDispatch from @/store/hooks
12- NEVER use useSelector or useDispatch directly (no type inference)
13- NEVER use connect() HOC (use hooks instead)
14- NEVER use manual action creators (createSlice generates them)
15- Use EntityAdapter for normalized collections
16- Use RTK Query for data fetching when possible
17
18## File pattern: src/features/{name}/{name}Slice.ts
19## State type exported as {Name}State
20## Selector functions exported as select{Property}

1@redux-toolkit.mdc @src/store/hooks.ts @src/features/auth/authSlice.ts
2
3Create a complete productsSlice following the same patterns as authSlice:
41. State type: ProductsState with items, loading, error, selectedId, filters
52. Async thunks: fetchProducts, fetchProductById, createProduct, updateProduct, deleteProduct
63. Reducers: setFilters, setSelectedId, clearError
74. Selectors: selectAllProducts, selectProductById, selectLoading, selectError
85. Use PayloadAction<T> for all reducer payloads
96. Handle loading/error states in extraReducers for all thunks
10
11Export everything: reducer (default), actions, thunks, selectors.

1import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
2import type { RootState, AppDispatch } from './store';
3
4export const useAppDispatch: () => AppDispatch = useDispatch;
5export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

1@redux-toolkit.mdc @src/store/hooks.ts @src/features/products/productsSlice.ts
2
3Create a ProductList component that:
41. Uses useAppSelector to read products, loading, and error state
52. Uses useAppDispatch to dispatch fetchProducts on mount
63. Shows a loading spinner while fetching
74. Shows an error message with retry button on failure
85. Renders a list of products with name, price, and category
96. Dispatches setSelectedId when a product is clicked
10
11Use the typed hooks from @/store/hooks, not raw useSelector/useDispatch.

1@redux-toolkit.mdc @src/store/store.ts
2
3Create an RTK Query API slice for products:
41. Base URL: /api
52. Endpoints: getProducts (query), getProductById (query), createProduct (mutation), updateProduct (mutation), deleteProduct (mutation)
63. Tag types for cache invalidation: ['Product', 'Products']
74. Generated hooks exported for use in components
85. Proper TypeScript types for all request and response shapes
9
10Add the API reducer and middleware to the store configuration.