redux について
reduxは、React開発者向けの状態管理スキルです。Reduxの基本とRedux Toolkitに加え、状態設計や非同期処理の指針を扱います。
主な機能
- 01store、reducer、action、dispatchの解説
- 02useSelectorとuseDispatchの紹介
- 03Redux Toolkitの主要API
- 04ミドルウェア、DevTools、非同期処理の説明
- 05状態分割と純粋関数の実践指針
活用シーン
- 01Reactアプリのグローバル状態設計
- 02createSliceとconfigureStoreによる状態ロジックの構築
- 03非同期状態にthunkまたはRTK Queryを選択
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/reduxを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlLICENSE.txt
詳細
このスキルを使う場面
次のことをユーザーが希望する場合は、このスキルを使用してください。
- Redux で React アプリのグローバル状態（store、reducer、action、dispatch）を管理する
- Redux Toolkit（createSlice、configureStore）または従来の書き方を使う
このスキルの使い方
- 基本：store、reducer、action、dispatch、useSelector、useDispatch。
- Toolkit：createSlice、configureStore、createAsyncThunk、DevTools とミドルウェア。
- 参考資料：https://react-redux.js.org/ 、https://redux-toolkit.js.org/
ベストプラクティス
- 状態はフラットに保ち、ドメインごとに reducer を分けます。action と reducer は純粋関数にします。
- 非同期処理には thunk または RTK Query を使います。reducer 内でリクエストを行わないようにします。
キーワード
redux, Redux Toolkit, store, 状態管理, React
コメント
Markdown 対応