redux-toolkit
Master Redux Toolkit's approach to global state management in React and Next.js projects. Learn to structure slices with createSlice, implement memoized selectors, handle async operations via RTK Query and createAsyncThunk, and apply TypeScript for type safety throughout your store.
Redux Toolkit provides expert guidance on state management patterns for React and Next.js applications using TypeScript.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-09
Redux Toolkit provides expert guidance on state management patterns for React and Next.js applications using TypeScript. Master Redux Toolkit's approach to global state management in React and Next.js projects. Learn to structure slices with createSlice, implement memoized selectors, handle async operations via RTK Query and createAsyncThunk, and apply TypeScript for type safety throughout your store.
Use it when
- redux-toolkit best practices include: organize state into logical slices using createSlice.
- redux-toolkit supports TypeScript natively.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
Mindrally/skills/redux-toolkit
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up redux-toolkit in a React or Next.js project?
redux-toolkit simplifies setup by providing createSlice, configureStore, and middleware out of the box. Install @reduxjs/toolkit and react-redux, then use configureStore to create your store with slices defined via createSlice. For Next.js, wrap your app with Redux Provider and configure server-side rendering support if needed. redux-toolkit handles Redux DevTools integration and Immer middleware automatically.
What are redux-toolkit best practices for React and Next.js?
redux-toolkit best practices include: organize state into logical slices using createSlice, leverage memoized selectors to prevent unnecessary re-renders, use RTK Query for data fetching instead of manual thunks, apply TypeScript for type safety, keep reducers pure and immutable (Immer handles mutations), and normalize nested data. For Next.js, ensure hydration safety and consider server-side state initialization.
How do I implement type-safe state management with redux-toolkit?
redux-toolkit supports TypeScript natively. Define your state shape as an interface, use createSlice with typed initial state, and leverage RootState and AppDispatch types for selectors and thunks. Use createAsyncThunk with typed payloads and return values. redux-toolkit's type inference automatically derives action types and reducer signatures, reducing boilerplate while ensuring compile-time safety across your store.
What is createSlice in redux-toolkit and how does it work?
createSlice is redux-toolkit's core API that combines reducer logic, actions, and action types into a single definition. Pass a name, initial state, and reducers object; createSlice auto-generates action creators and action types. It uses Immer internally, so you can write mutations directly in reducers. The returned slice object exports actions and reducer, which you register with configureStore for a complete, boilerplate-free state slice.
How do I set up async operations and data fetching with RTK Query?
redux-toolkit's RTK Query provides createApi to define endpoints for data fetching with built-in caching, synchronization, and error handling. Define a base query (fetch, axios, etc.), then create endpoints for GET, POST, and other methods. RTK Query auto-generates hooks like useGetDataQuery for components, handles loading/error states, and manages cache invalidation. This eliminates manual createAsyncThunk boilerplate for most data-fetching scenarios.
How can I optimize redux-toolkit performance with selectors?
redux-toolkit performance optimization relies on memoized selectors created with createSelector from reselect. Memoized selectors prevent component re-renders when selected state hasn't changed. Use createSelector to combine multiple input selectors and derive computed values efficiently. Normalize your state shape to avoid deep nesting, use RTK Query's built-in caching, and leverage Redux DevTools to identify selector recomputation bottlenecks.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Redux Toolkit
You are an expert in Redux Toolkit for state management in React and Next.js applications.
Development Philosophy
- Write clean, maintainable, and scalable code
- Adhere to SOLID principles
- Favor functional and declarative programming patterns
- Emphasize type safety and component-driven approaches
Redux State Management
Core Principles
- Implement Redux Toolkit for global state management
- Use createSlice to define state, reducers, and actions together
- Normalize state structure to prevent deeply nested data
- Employ selectors to encapsulate state access
- Separate concerns by feature; avoid monolithic slices
Slice Structure
```typescript import { createSlice, PayloadAction } from '@reduxjs/toolkit'
interface CounterState { value: number isLoading: boolean }
const initialState: CounterState = { value: 0, isLoading: false, }
const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.value += 1 }, setLoading: (state, action:
(truncated - see the full file via the links below)
File tree — 1 file
redux-toolkit/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn Redux Toolkit best practices for React and Next.js”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill delivers a complete ruleset for building maintainable Next.js and React applications with Redux Toolkit and TypeScript. It covers code style conventions, component patterns, performance optimization, state management strategies, and accessibility standards grounded in SOLID principles and functional programming approaches.
Set up production-ready state management using Redux Toolkit, Zustand, MobX, or Context API with useReducer. Choose the right pattern for your app's complexity, from lightweight stores to full-featured solutions with time-travel debugging and async handling.
Learn to architect scalable state solutions for React Native apps using Redux Toolkit for complex app state, Zustand for lightweight global stores, and TanStack Query for server-side caching. This skill covers TypeScript integration, data persistence with AsyncStorage and MMKV, and decision frameworks for choosing the right tool per use case.
Comprehensive guide to React state management covering local component state, global stores, and server state synchronization. Compares Redux Toolkit, Zustand, Jotai, and React Query with selection criteria and best practices for each approach.
This adapter bridges Redux (or Redux Toolkit) with json-render's state management layer, letting you use your Redux store as the backing state for dynamic UI generation. Configure it with your store instance, a selector for your UI slice, and a dispatch function to sync state changes back through Redux.
Zustand provides lightweight state management for React using hooks instead of providers or complex patterns. It's designed for apps needing global state without Redux overhead, offering direct mutations and flexible hydration for server-side rendering.
More skills State Management Expert (unlicensed) · Data Fetching Architecture (NOASSERTION)