技能 react-state-management

📦

react-state-management

Name: react-state-management
Author: wshobson

內容修訂 r1 安全 ⚙️ 外部命令🌐 網路存取

選擇 React 狀態管理工具

React 應用程式經常在沒有清楚界線的情況下混用本機、共享和伺服器資料。這項技能可協助選擇並套用 Redux Toolkit、Zustand、Jotai 和 React Query 模式。

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "react-state-management" from https://skillstore.io/skills/wshobson-react-state-management.md and its manifest at https://skillstore.io/api/skills/wshobson-react-state-management/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/wshobson-react-state-management.md 已簽名 manifest GET /api/skills/wshobson-react-state-management/manifest 已簽名 lockfile GET /api/skills/wshobson-react-state-management/lockfile

測試它

正在使用「react-state-management」。小型儀表板需要 theme state、modal state 和快取的 user lists。

預期結果:

建議方法：使用 Zustand 管理 UI state，使用 React Query 管理 user data。將 theme 和 modal actions 保留在 UI store 中。讓 React Query 負責 cache freshness、loading state 和 refetch behavior。

正在使用「react-state-management」。大型商務應用程式有 cart、user、inventory 和 checkout flows。

預期結果:

針對需要可預測 actions 的 cart 和 checkout workflows 使用 Redux Toolkit。
針對 inventory 和 user profile requests 使用 React Query。
避免在全域用戶端 store 中重複儲存 API responses。

正在使用「react-state-management」。團隊想要針對獨立 filters 和 preferences 進行細粒度更新。

預期結果:

當獨立 atoms 可減少 rerenders 並簡化 derived values 時，Jotai 非常適合。只持久化非敏感 preferences。

安全審計

安全

v8 • 2026/7/8 開啟版本化報告

I reviewed SKILL.md and found no executable installer code, prompt injection, or malicious intent. The static findings are false positives from Markdown fences, TypeScript examples, relative API calls, and public documentation links.

已掃描檔案

430

分析行數

複核項目

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/wshobson-react-state-management/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-react-state-management/security.svg)](https://skillstore.io/skills/wshobson-react-state-management?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/wshobson-react-state-management?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-react-state-management/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/wshobson-react-state-management.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

wshobson. (2026). react-state-management security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-react-state-management/audits/8

BibTeX 引用

@techreport{wshobson-wshobson-react-state-management-2026,
  author = {wshobson},
  title = {react-state-management security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/wshobson-react-state-management/audits/8},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-state-management security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-react-state-management/audits/8"
identifiers:
  - type: other
    value: "skillstore:wshobson-react-state-management:audit:8"
    description: "Skillstore immutable audit report identifier"

比較變體

2 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 使用量較高

作者 / 來源 Skillstore 評分證據置信度 Skillstore 使用量已更新

wshobson 推薦目前

wshobson-react-state-management

Skillstore 評分 78

證據置信度高

Skillstore 使用量 15

已更新

2026-09-09

sickn33

sickn33-react-state-management

Skillstore 評分 78

證據置信度高

Skillstore 使用量 12

已更新

2026-09-09

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

選擇狀態函式庫

為新的 React 應用程式架構比較 Redux Toolkit、Zustand、Jotai 和 React Query。

重構共享狀態

將分散的元件狀態移至具備 selectors 和更清楚所有權的型別化全域 store。

改善伺服器資料流程

使用 React Query 模式和樂觀更新，將用戶端 UI 狀態與快取的 API 資料分離。

試試這些提示

選擇函式庫

協助我為這個應用程式選擇 React 狀態管理方法：[描述應用程式規模、資料來源和團隊經驗]。

設計 Store

為 [功能] 設計型別化 state store。包含狀態形狀、actions、selectors，以及每個檔案應放置的位置。

分離用戶端和伺服器狀態

檢視這個 React 資料流程，並指出哪些應使用 React Query，哪些應使用本機或全域用戶端狀態：[貼上摘要]。

規劃遷移

為這些 slices 和 async flows 建立從舊版 Redux 遷移到 Redux Toolkit 的計畫：[列出模組和風險]。

最佳實務

讓狀態盡可能靠近使用它的元件。
使用 selectors 和 typed hooks 來減少 rerenders 和執行階段錯誤。
將伺服器快取所有權與用戶端 UI 狀態所有權分離。

避免

不要預設將每個值都放入全域 store。
不要在 React Query 和用戶端 store 之間重複儲存 server state。
未經安全審查，不要將敏感 tokens 持久化到瀏覽器儲存空間中。

常見問題

這項技能會安裝任何狀態函式庫嗎？

不會。它提供開發者在自己專案中安裝函式庫時可用的指引和範例。

它能協助在 Redux Toolkit 和 Zustand 之間做選擇嗎？

可以。它會根據應用程式規模、複雜度、團隊需求和狀態所有權說明選擇標準。

它涵蓋 server state 嗎？

可以。它包含 React Query 模式，涵蓋 query keys、caching、mutations 和 optimistic updates。

它適合 TypeScript 專案嗎？

適合。範例強調 typed stores、typed hooks 和 typed state shapes。

它能取代應用程式架構審查嗎？

不能。它提供模式，但團隊仍應檢視專案限制和安全需求。

網路範例有風險嗎？

範例使用相對 API paths 進行教學。開發者應檢視其應用程式中的真實 endpoints 和資料處理方式。

開發者詳細資訊

作者

wshobson

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/react-state-management

引用

64ca8af0f54a325752f08bd54e52151061ea659a

維護新鮮度

2026/7/25

使用量

8 次下載 · 204 次瀏覽

檔案結構

📄 SKILL.md

wshobson 的更多技能

查看全部

📦

prompt-engineering-patterns

最佳化生產環境 LLM 提示

LLM 提示經常失敗，是因為指令、範例和評估標準不清楚。此技能提供範本與工作流程，用於改進 Claude、Codex、Claude Code 及類似工具中的提示。

效率查看

📦

context-driven-development

管理情境驅動開發

當產品目標、技術堆疊選擇和工作流程規則分散各處時，AI 輔助專案會失去一致性。此技能會透過 Conductor 情境成品，引導 Claude、Codex 和 Claude Code。

程式開發查看

📦

startup-financial-modeling

建立新創財務模型

新創團隊在規劃招募、募資和現金使用之前，需要清楚的預測。此技能會將收入、成本、現金續航期和情境整理成實用的財務規劃輸出。

資料與分析查看

📦

kpi-dashboard-design

設計能推動決策的 KPI 儀表板

團隊經常建立顯示許多數字但無法引導行動的儀表板。此技能可協助 Claude、Codex 和 Claude Code 選擇有意義的 KPI、組織檢視畫面，並清楚呈現指標。

設計與創意查看

📦

postmortem-writing

撰寫無責備事故事後檢討

事故檢討常常變得不一致、偏向究責，或難以採取行動。此技能可協助 Claude、Codex 和 Claude Code 草擬結構化事後檢討，包含清楚的時間軸、根本原因與負責人。

寫作與內容查看

📦

data-storytelling

建立清晰的資料故事

原始指標通常難以說服利害關係人或支援決策。這項技能可協助 Claude、Codex 和 Claude Code 將分析整理成清晰的敘事、視覺化內容與建議。

資料與分析查看

查看全部

📦

zustand-store-ts

建置型別化的 Zustand Store

由 sickn33

React 團隊需要可預測的全域狀態，並避免不清楚的 store 結構。此技能會引導 Claude、Codex 和 Claude Code 建立具有選擇器與中介軟體的型別化 Zustand store。

程式開發查看

📦

implementing-command-palettes

建置 React 命令面板

由 AgentWorkforce

命令面板常因焦點錯誤、過期的監聽器，以及不穩定的命令參照而失效。這項技能提供實用的 React 模式，用於建立可靠的鍵盤驅動命令面板。

程式開發查看

📦

senior-fullstack

以資深指導建置全端應用程式

由 alirezarezvani

全端專案通常需要一致的設定、架構選擇與品質檢查。此技能提供用於 React、Next.js、Node.js、GraphQL 與 PostgreSQL 工作的指令碼與參考資料。

程式開發查看

📦

vercel-react-view-transitions

實作 React View Transitions

由 vercel-labs

React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。

程式開發查看

📦

react-dev

建構型別安全的 React 元件

由 softaworks

React TypeScript 工作經常需要精確的事件、hook 與路由型別。此 skill 提供型別化元件、React 19 APIs 與路由的聚焦模式。

程式開發查看

📦

senior-frontend

建置可用於正式環境的前端功能

由 davila7

前端團隊需要在各專案之間保持一致的 React 和 Next.js 指引。此技能提供前端分析的參考工作流程、品質實務和輔助腳本。

程式開發查看

react-state-management

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

比較變體

Skillstore 評分

你可以打造什麼

選擇狀態函式庫

重構共享狀態

改善伺服器資料流程

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

wshobson 的更多技能

prompt-engineering-patterns

context-driven-development

startup-financial-modeling

kpi-dashboard-design

postmortem-writing

data-storytelling

相關技能

zustand-store-ts

implementing-command-palettes

senior-fullstack

vercel-react-view-transitions

react-dev

senior-frontend