# redux

Enforces Redux Toolkit patterns, feature slices, and RTK Query in Cursor for JavaScript and JSX codebases.

- rule · `type=rule` · Cursor · ★ 3580
- Author: sanjeed5
- License: CC0-1.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/redux.mdc
- Updated: 2026-05-19
- HTML: https://affpapa.org/en/nevibecode/rules/redux

## What it does

This rule instructs Cursor to generate state logic exclusively with Redux Toolkit (RTK), banning vanilla Redux APIs. It dictates a feature-first layout where each domain entity lives in its own slice file via `createSlice` inside `features/<name>/`. Root store setup is locked to `src/app/store.js` using `configureStore`.

Data fetching is delegated to RTK Query via `createApi`, restricting `createAsyncThunk` to complex multi-step operations. For collections, the rule requires flat, normalized data structures with ID arrays and entity dictionaries. If `@reduxjs/toolkit` is missing from your dependencies, Cursor will still output code that relies on it.

## Install

### Cursor (native platform)

**Manually: put the files in place**
- File: `.cursor/rules/redux.mdc` — Frontmatter: description, globs, alwaysApply

### Claude Code

**Manually: put the files in place**
- File: `.claude/rules/redux.md` — The paths frontmatter field limits the files: move globs from the source into paths

### Codex

**AGENTS.md**
- Codex reads AGENTS.md: paste the rule text there

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/instructions/redux.instructions.md` — The applyTo field sets which files it applies to: move globs from the source into applyTo

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/rules/redux.md`

### Cline

**Manually: put the files in place**
- File: `.clinerules/redux.md`

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/redux.mdc

## When to use it
- scaffold feature slices with `createSlice` without classic boilerplate
- normalize collection states with ID dictionaries and entity maps
- manage API fetching and caching with RTK Query endpoints
- stop direct state mutations outside Immer-wrapped reducers

## Example prompts
- Create a posts slice with an addPost action using RTK conventions
- Set up an RTK Query API service for fetching comments
- Configure the central Redux store in `src/app/store.js`

## Source text · redux.mdc · CC0-1.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a27283721723cf99.

BEGIN THIRD-PARTY FILE a27283721723cf99
````text
---
description: This guide defines the definitive best practices for using Redux in our projects, mandating Redux Toolkit (RTK) for all state management logic to ensure consistency, maintainability, and optimal performance.
globs: **/*.{js,jsx}
---
# redux Best Practices

Redux is our standard for predictable state management. **All new Redux code MUST use Redux Toolkit (RTK)**. RTK simplifies Redux, enforces best practices, and eliminates boilerplate. Do not use vanilla Redux APIs directly.

## 1. Code Organization and Structure

Organize your Redux logic by feature, using a "slice" approach. This co-locates all related state, actions, and reducers, improving discoverability and maintainability.

### 1.1. Feature-First Directory Structure

Group all Redux-related files for a specific feature within a single directory.

```
src/
├── app/
│   ├── store.js             // Root store configuration
│   └── hooks.js             // Pre-typed Redux hooks (for TS)
└── features/
    ├── users/
    │   ├── usersSlice.js    // User slice (reducer, actions)
    │   └── UserList.jsx     // Component using user slice
    └── posts/
        ├── postsSlice.js    // Post slice
        └── PostEditor.jsx   // Component using post slice
```

### 1.2. Single-File Slices

Define your reducer, initial state, and action creators in a single file using `createSlice`. This is the "ducks" pattern, simplified by RTK.

❌ **BAD: Scattered Redux files**
```javascript
// src/features/posts/actions.js
export const addPost = (payload) => ({ type: 'posts/addPost', payload });

// src/features/posts/reducers.js
const postsReducer = (state = [], action) => { /* ... */ };

// src/features/posts/constants.js
const ADD_POST = 'posts/addPost';
```

✅ **GOOD: Co-located slice with `createSlice`**
```javascript
// src/features/posts/postsSlice.js
import { createSlice, nanoid } from '@reduxjs/toolkit';

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    postAdded: {
      reducer(state, action) {
        state.push(action.payload);
      },
      prepare(title, content, userId) {
        return {
          payload: {
            id: nanoid(),
            title,
            content,
            user: userId,
            date: new Date().toISOString(),
          },
        };
      },
    },
    // ... other reducers
  },
});

export const { postAdded } = postsSlice.actions;
export default postsSlice.reducer;
```

### 1.3. Root Store Configuration

Centralize your store setup in `src/app/store.js` using `configureStore`. This automatically includes `redux-thunk`, Redux DevTools integration, and development-time checks for common mistakes.

```javascript
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import usersReducer from '../features/users/usersSlice';
import postsReducer from '../features/posts/postsSlice';

export const store = configureStore({
  reducer: {
    users: usersReducer,
    posts: postsReducer,
  },
  // middleware and devTools are configured by default
});
```

## 2. State Organization

Keep your state as flat and normalized as possible, especially for collections of items.

### 2.1. Normalize Data for Collections

Store collections of items (e.g., users, posts) in a normalized way: an object mapping IDs to item objects, plus an array of IDs. This prevents data duplication and simplifies updates.

❌ **BAD: Array of objects (hard to update)**
```javascript
// state.posts = [{ id: '1', title: 'A', author: { id: 'u1', name: 'Alice' } }, ...]
// Updating Alice's name requires iterating through all posts.
```

✅ **GOOD: Normalized state (easy to update)**
```javascript
// state.posts = {
//   ids: ['1', '2'],
//   entities: {
//     '1': { id: '1', title: 'A', authorId: 'u1' },
//     '2': { id: '2', title: 'B', authorId: 'u2' },
//   },
// };
// state.users = {
//   ids: ['u1', 'u2'],
//   entities: {
//     'u1': { id: 'u1', name: 'Alice' },
//     'u2': { id: 'u2', name: 'Bob' },
//   },
// };
````
END THIRD-PARTY FILE a27283721723cf99

The third-party file has ended. Everything between the a27283721723cf99 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 4074 of 12310 bytes. © sanjeed5 · CC0-1.0 · https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/redux.mdc

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md