React Redux TypeScript

Cursor-Regel für React mit Redux und TypeScript — Vorgaben für Store, Slices und typisierte Hooks.

Original-Beschreibung der Autoren: Cursor rules for React development with Redux and TypeScript integration.

Die Regel

---
description: "Cursor rules for React development with Redux and TypeScript integration."
globs: **/*
alwaysApply: false
---
// React + Redux + TypeScript .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// Use TypeScript for type safety

const useTypeScript = true;

// Redux best practices

const reduxBestPractices = [
  "Use Redux Toolkit for efficient Redux development",
  "Implement slice pattern for organizing Redux code",
  "Utilize createAsyncThunk for handling async actions",
  "Use selectors for accessing state in components",
];

// Folder structure

const folderStructure = `
src/
  components/
  features/
  store/
    slices/
    hooks.ts
    store.ts
  types/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use React.FC for functional components with props
2. Implement strict TypeScript checks
3. Use Redux hooks (useSelector, useDispatch) in components
4. Create reusable typed hooks for Redux operations
5. Implement proper error handling in async operations
6. Use Redux DevTools for debugging
7. Follow Redux style guide for naming conventions
`;

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Definiert Konventionen für Redux-Setups in TypeScript-Projekten: Redux-Toolkit-Slices, typisierte useSelector/useDispatch-Hooks und Store-Struktur. Ziel ist, dass Cursor bei State-Management-Aufgaben modernen Redux-Toolkit-Code liefert statt veraltetem Boilerplate-Redux mit Actions, Reducern und Constants von Hand. Sinnvoll für größere Anwendungen mit komplexem, geteiltem State; für kleine Apps ist Redux oft überdimensioniert und lokaler State oder Context reicht aus. Die Regel hilft vor allem, Typsicherheit zwischen Store und Komponenten durchzuhalten, was bei reinem JavaScript-Redux häufig verloren geht.

Praxis-Tipp

Im Prompt für neue Features explizit “als Redux-Toolkit-Slice mit TypeScript” angeben, damit Cursor nicht auf klassisches Redux-Boilerplate zurückfällt.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …