redux-best-practices

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# 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)**

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

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

npx skills add felipeorlando/redux-best-practices

From GitHub

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

Manual Installation

Clone this repository
Copy the redux-best-practices.skill file to your skills directory
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:

// 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!

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

Please ensure any additions align with the official Redux 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

License

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

Built for Claude Code | Share on skills.sh