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
Install
Mindrally/skills/redux-toolkit
git clone https://github.com/Mindrally/skills
cp -r skills/redux-toolkit ~/.claude/skills/redux-toolkitnpx skillfed install Mindrally/skills/redux-toolkitFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
redux-toolkit/SKILL.md