felipeorlando/redux-best-practices

Overview

This skill provides concise Redux and React-Redux best practices, patterns, and anti-patterns based on the official Redux style guide. Use it to write, review, or refactor Redux code for store setup, slices, selectors, async logic, and React-Redux usage. It emphasizes Redux Toolkit (RTK), state normalization, and safe reducer patterns.

How this skill works

The skill inspects code patterns around createSlice, configureStore, useSelector/useDispatch, thunks, and RTK Query to detect common issues and recommend fixes. It checks for state mutation, non-serializable values, impure reducers, poor selector granularity, and anti-patterns like storing UI-only state in Redux. It also suggests folder structure, typed hooks, and proper async handling with createAsyncThunk or RTK Query.

When to use it

• Writing new Redux state or slices with createSlice/configureStore
• Refactoring or reviewing existing Redux reducers, selectors, or store topology
• Implementing async data flows with thunks or RTK Query
• Deciding whether state belongs in Redux vs local component state
• Adding typed hooks for useSelector/useDispatch or normalizing complex state

Best practices

• Always use Redux Toolkit (configureStore, createSlice) and prefer Immer-safe mutative syntax in reducers
• Keep reducers pure: no async calls, Date.now(), or Math.random() inside reducers
• Keep state serializable; never store Promises, DOM nodes, Functions, Maps/Sets, or class instances
• Normalize nested collections (byId/ids) to simplify updates and selector logic
• Model actions as domain events (domain/eventName) rather than generic setters
• Use React-Redux hooks and favor multiple granular useSelector calls to minimize re-renders

Example use cases

• Create a feature slice with createSlice and local selectors for a normalized todos list
• Refactor a large nested state tree into normalized entities with selectById selectors
• Replace sequential dispatches with a single event action representing the composed change
• Implement API caching and mutations using RTK Query and its hooks
• Add typed useAppSelector/useAppDispatch hooks to enforce RootState and AppDispatch across the app