---
slug: "redux-best-practices"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/felipeorlando/redux-best-practices@main/README.md"
repo: "https://github.com/felipeorlando/redux-best-practices"
source_file: "README.md"
branch: "main"
---
# Redux Best Practices

A Claude Code skill that provides comprehensive Redux and React-Redux best practices guidance based on the official Redux Style Guide. This skill helps you write, review, and refactor Redux code with confidence.

**Intended for sharing on [skills.sh](https://skills.sh)**

## What This Skill Does

This skill automatically activates when you're working with Redux code to provide:

- **Official Redux Style Guide Rules**: All 35 rules organized by priority (Essential, Strongly Recommended, Recommended)
- **Anti-Pattern Detection**: Common mistakes and their solutions
- **Redux Toolkit Patterns**: Modern patterns using `createSlice`, `createAsyncThunk`, and `createEntityAdapter`
- **State Architecture Guidance**: Normalization, async handling, and selector optimization
- **React Integration Best Practices**: Proper use of hooks, subscription patterns, and performance optimization

## When It's Useful

The skill automatically activates when you're:

- Writing new Redux slices or reducers
- Setting up a Redux store with `configureStore`
- Creating selectors or using `useSelector`/`useDispatch`
- Implementing async logic with thunks or RTK Query
- Refactoring existing Redux code
- Reviewing Redux code for best practices
- Making state management architecture decisions
- Normalizing state structure

## Installation

### From skills.sh

```bash
npx skills add felipeorlando/redux-best-practices
```

### From GitHub

```bash
npx skills add github:felipeorlando/redux-best-practices
```

### Manual Installation

1. Clone this repository
2. Copy the `redux-best-practices.skill` file to your skills directory
3. Restart Claude Code

## What's Included

### Official Style Guide Rules

All 35 rules from the Redux documentation, categorized by priority:

- **Essential (12 rules)**: Must-follow rules that prevent bugs and errors
  - No direct state mutations
  - Pure reducers without side effects
  - Serializable state and actions
  - Single store per application
  - And more...

- **Strongly Recommended (15 rules)**: Significantly improve developer experience
  - Use Redux Toolkit for all Redux code
  - Feature-based folder structure
  - Event-driven action naming
  - Modern React-Redux hooks API
  - And more...

- **Recommended (8 rules)**: Ensure consistency and readability
  - Action naming conventions
  - RTK Query for data fetching
  - Type-safe state structure
  - And more...

### Anti-Patterns Guide

Common Redux mistakes with solutions:

| Anti-Pattern | Problem | Solution |
|--------------|---------|----------|
| Mutating State | Breaks change detection | Use Immer via Redux Toolkit |
| Deeply Nested State | Hard to update | Normalize with `createEntityAdapter` |
| Large Slices | Poor maintainability | Split by feature domain |
| Generic Action Names | Unclear intent | Use domain/eventName pattern |
| Local State in Redux | Unnecessary complexity | Keep UI state in components |

### Complete Reference Examples

Detailed TypeScript examples demonstrating:

- **Normalized Entity Management**: Using `createEntityAdapter` for efficient CRUD operations
- **Async State Handling**: Authentication flow with loading states and error handling
- **Feature Architecture**: Complete todos feature with separated API layer, slice logic, memoized selectors, and React components

## Usage

Simply work with Redux code naturally. Claude will automatically reference this skill when:

```typescript
// Creating a slice
const slice = createSlice({
  // Claude will guide you on naming, structure, and patterns
});

// Setting up selectors
const selectUser = (state) => state.user;
// Claude will suggest memoization and optimization

// Writing async logic
const fetchData = createAsyncThunk(/* ... */);
// Claude will ensure proper loading states and error handling
```

Or explicitly request Redux guidance:

- "Review this Redux slice for best practices"
- "Help me normalize this state structure"
- "How should I handle this async operation in Redux?"
- "Refactor this Redux code to use Redux Toolkit"

## Skill Structure

```
redux-best-practices/
├── SKILL.md                          # Main instruction document
├── CLAUDE.md                         # Skill metadata
└── references/
    └── slice-patterns.md             # Complete implementation examples
```

## Philosophy

This skill embodies the Redux team's official guidance:

- **Redux Toolkit First**: Modern Redux development starts with RTK
- **Feature-Based Organization**: Co-locate related code for maintainability
- **Immutability by Default**: Leverage Immer for safe state updates
- **Normalized State**: Treat Redux store like a database
- **Performance-Conscious**: Memoized selectors and granular subscriptions

## Contributing

Found a missing pattern or outdated advice? Contributions are welcome!

1. Fork this repository
2. Create a feature branch
3. Update `SKILL.md` or `references/slice-patterns.md`
4. Submit a pull request

Please ensure any additions align with the [official Redux Style Guide](https://redux.js.org/style-guide/).

## Related Skills

- **react-native-best-practices**: Performance optimization for React Native apps using Redux
- **vercel-react-best-practices**: React and Next.js patterns (works great with RTK Query)
- **web-design-guidelines**: UI/UX best practices for Redux-powered applications

## Support

- [Report Issues](https://github.com/felipeorlando/redux-best-practices/issues)
- [Skills.sh Marketplace](https://skills.sh)
- [Redux Documentation](https://redux.js.org)
- [Redux Toolkit Documentation](https://redux-toolkit.js.org)

## License

MIT License - feel free to use and adapt for your projects.

---

**Built for Claude Code** | **Share on [skills.sh](https://skills.sh)**