Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill redux-state-managementDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name redux-state-management description Master Redux Toolkit for production state management including slices, async thunks, RTK Query, and error handling sasmp_version 2.0.0 bonded_agent 04-state-management bond_type PRIMARY_BOND input_validation {"required_packages":[{"@reduxjs/toolkit":">=2.0.0"},{"react-redux":">=9.0.0"}]} output_format {"code_examples":"typescript","test_template":"jest"} error_handling {"patterns":["retry_query","optimistic_update","error_boundary"],"retry_config":{"max_retries":3,"backoff_multiplier":2}} observability {"logging":"redux_devtools","metrics":["action_count","state_size"]}
Redux State Management Skill
Overview
Master Redux Toolkit for state management in React applications, including store configuration, slices, async operations, and RTK Query for API state.
Learning Objectives
Configure Redux store with Redux Toolkit
Create slices and reducers
Handle async operations with createAsyncThunk
Use RTK Query for API data management
Integrate Redux DevTools
Quick Start
Installation
npm install @reduxjs/toolkit react-redux
Store Setup
import { configureStore } from '@reduxjs/toolkit' ;
import counterReducer from './features/counter/counterSlice' ;
import userReducer from './features/user/userSlice' ;
export const store = configureStore ({
reducer : {
counter : counterReducer,
user : userReducer
}
});
import { Provider } from 'react-redux' ;
import { store } from './store' ;
function App (return (
<Provider store ={store} >
<YourApp />
</Provider > Creating Slices
import
from
'@reduxjs/toolkit'
const
createSlice
name
'counter'
initialState
value
0
reducers
increment
(state ) =>
value
1
decrement
(state ) =>
value
1
incrementByAmount
(state, action ) =>
value
payload
export
const
actions
export
default
reducer
Using Redux in Components import { useSelector, useDispatch } from 'react-redux' ;
import { increment, decrement } from './counterSlice' ;
function Counter (const count = useSelector ((state ) => state.counter .value );
const dispatch = useDispatch ();
return (
<div >
<p > Count: {count}</p >
<button onClick ={() => dispatch(increment())}>+</button >
<button onClick ={() => dispatch(decrement())}>-</button >
</div >
Async Operations
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' ;
export const fetchUser = createAsyncThunk (
'user/fetchUser' ,
async (userId) => {
const response = await fetch (`/api/users/${userId} ` );
return response.json ();
}
);
const userSlice = createSlice ({
name : 'user' ,
initialState : {
user : null ,
status : 'idle' ,
error : null
},
reducers : {},
extraReducers : (builder ) => {
builder
.addCase (fetchUser.pending , (state ) => {
state.status = 'loading' ;
})
.addCase (fetchUser.fulfilled , (state, action ) => {
state.status = 'succeeded' ;
state.user = action.payload ;
})
.addCase (fetchUser.rejected , (state, action ) => {
state.status = 'failed' ;
state.error = action.error .message ;
});
}
});
export default userSlice.reducer ;
RTK Query
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' ;
export const api = createApi ({
reducerPath : 'api' ,
baseQuery : fetchBaseQuery ({ baseUrl : '/api' }),
tagTypes : ['Posts' , 'Users' ],
endpoints : (builder ) => ({
getPosts : builder.query ({
query : () => '/posts' ,
providesTags : ['Posts' ]
}),
getPost : builder.query ({
query : (id ) => `/posts/${id} ` ,
providesTags : (result, error, id ) => [{ type : 'Posts' , id }]
}),
addPost : builder.mutation ({
query : (post ) => ({
url : '/posts' ,
method : 'POST' ,
body : post
}),
invalidatesTags : ['Posts' ]
}),
updatePost : builder.mutation ({
query : ({ id, ...patch } ) => ({
url : `/posts/${id} ` ,
method : 'PATCH' ,
body : patch
}),
invalidatesTags : (result, error, { id } ) => [{ type : 'Posts' , id }]
})
})
});
export const {
useGetPostsQuery,
useGetPostQuery,
useAddPostMutation,
useUpdatePostMutation
} = api;
Using RTK Query in Components function PostList (const { data : posts, isLoading, error } = useGetPostsQuery ();
const [addPost] = useAddPostMutation ();
if (isLoading) return <div > Loading...</div > if (error) return <div > Error: {error.message}</div > return (
<div >
{posts.map(post => (
<PostCard key ={post.id} post ={post} />
))}
<button onClick ={() => addPost({ title: 'New Post' })}>
Add Post
</button >
</div >
Practice Exercises
Build a todo app with Redux Toolkit
Implement user authentication flow
Create shopping cart with Redux
Build API integration with RTK Query
Implement optimistic updates
Create normalized state with Entity Adapter
Resources
Error Handling Patterns
const api = createApi ({
baseQuery : fetchBaseQuery ({
baseUrl : '/api' ,
prepareHeaders : (headers, { getState } ) => {
const token = (getState () as RootState ).auth .token ;
if (token) headers.set ('authorization' , `Bearer ${token} ` );
return headers;
},
}),
endpoints : (builder ) => ({
getData : builder.query ({
query : (id ) => `data/${id} ` ,
extraOptions : { maxRetries : 3 },
transformErrorResponse : (response ) => ({
status : response.status ,
message : response.data ?.message || 'Unknown error' ,
}),
}),
}),
});
Unit Test Template import { configureStore } from '@reduxjs/toolkit' ;
import { renderHook, waitFor } from '@testing-library/react' ;
import { Provider } from 'react-redux' ;
import { api } from './api' ;
describe ('Redux State' , () => {
const wrapper = ({ children } ) => (
<Provider store ={configureStore({ reducer: { [api.reducerPath ]: api.reducer } })}>
{children}
</Provider > it ('should fetch data successfully' , async () => {
const { result } = renderHook (() => api.useGetDataQuery (1 ), { wrapper });
await waitFor (() => expect (result.current .isSuccess ).toBe (true ));
expect (result.current .data ).toBeDefined ();
});
});
Version : 2.0.0
Last Updated : 2025-12-30
SASMP Version : 2.0.0
Difficulty : Intermediate
Estimated Time : 2-3 weeks
Prerequisites : React Hooks, State Management Concepts
Changelog : Added RTK Query patterns, error handling, and test templates
