playbooks

home / skills / partme-ai / full-stack-skills / redux

redux skill

/skills/redux

This skill provides comprehensive guidance on Redux state management, including stores, reducers, middleware, and Toolkit patterns for scalable frontend apps.

npx playbooks add skill partme-ai/full-stack-skills --skill redux

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
668 B
---
name: redux
description: Provides comprehensive guidance for Redux state management including stores, actions, reducers, middleware, selectors, and Redux Toolkit. Use when the user asks about Redux, needs to manage global state, implement Redux patterns, or work with Redux middleware.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides comprehensive guidance for Redux state management, covering stores, actions, reducers, middleware, selectors, and Redux Toolkit. It helps design predictable global state, enforce unidirectional data flow, and modernize patterns with Redux Toolkit. The guidance is practical and focused on implementation, testing, and migration strategies.

How this skill works

The skill inspects your application needs and recommends Redux patterns: how to structure stores, define actions and reducers, create selectors, and integrate middleware like thunk or saga. It explains how to use Redux Toolkit to reduce boilerplate and provides migration steps from classic Redux. It also offers examples, common pitfalls, and testing techniques for reducers and async flows.

When to use it

  • Managing complex or shared UI state across many components
  • Enforcing predictable state updates and time-travel/debugging needs
  • Implementing global side-effect handling or structured async logic
  • Standardizing state shape and selectors across a large codebase
  • Migrating from prop drilling or ad-hoc context patterns to a centralized store

Best practices

  • Normalize state shape and store entities by id to simplify updates
  • Keep reducers pure and small; delegate logic to utility functions when needed
  • Use Redux Toolkit createSlice and createAsyncThunk to reduce boilerplate
  • Write memoized selectors with Reselect to avoid unnecessary re-renders
  • Limit direct store access in components; prefer hooks (useSelector/useDispatch) or connected containers
  • Test reducers and async thunks independently; mock middleware for integration tests

Example use cases

  • Create a central store for user auth, preferences, and feature flags across an app
  • Implement paginated data fetching with createAsyncThunk and cache invalidation strategies
  • Introduce middleware for logging, crash reporting, or retry logic on network failures
  • Refactor a large component tree to use selectors and a single source of truth instead of prop drilling
  • Migrate an existing Redux codebase to Redux Toolkit slices and modern hooks-based usage

FAQ

Should I always use Redux for state management?

Not always. Use Redux when state is shared, complex, or requires predictable updates and tooling. For simple local state, React context or component state may suffice.

How does Redux Toolkit change classic Redux?

Redux Toolkit reduces boilerplate by providing createSlice, createAsyncThunk, and configureStore. It encourages immutable updates using Immer and sensible defaults for middleware and devtools.