React Redux TypeScript

Cursor-Regel für React mit Redux und TypeScript: typisierte Slices und 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

Diese Regel definiert, wie Redux zusammen mit TypeScript in React-Projekten aufgesetzt wird: typisierte Store-Konfiguration, Slices mit Redux Toolkit und typisierte Hooks (useAppSelector, useAppDispatch) statt der generischen React-Redux-Hooks. Das reduziert Tippfehler und sorgt für Autovervollständigung im gesamten State-Zugriff. Sinnvoll für größere Anwendungen mit komplexem, geteiltem State und Bedarf an nachvollziehbaren, testbaren State-Transitionen. Im Vergleich zu MobX oder Zustand ist der Aufwand höher, dafür ist der Datenfluss expliziter und mit DevTools gut debugbar — passend für Teams, die diese Struktur bereits gewohnt sind.

Praxis-Tipp

Prompt-Beispiel: ‘Erstelle einen Redux-Toolkit-Slice für Auth mit typisierten Actions und einem typisierten useAppSelector-Hook’ liefert direkt die von der Regel vorgegebene Struktur.

Lizenz & Quelle

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

Lade …