Frontend State Management

aj-geddes/useful-ai-prompts/skills/frontend-state-management

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Manage application state using Redux, MobX, Zustand, and Context API. Use when centralizing state for complex applications with multiple components.

仅含说明Software Development

AI 生成的概览

指导前端状态管理，涵盖 Redux Toolkit、Zustand、Context API 与 MobX，并提供参考指南和组件模板。

功能: 该技能为前端项目中的应用状态管理实现提供指导。它通过独立的参考指南分别介绍 Redux with Redux Toolkit、Zustand、Context API 配合 useReducer 以及 MobX，并附带一个组件模板。它还列出了编写整洁、经过测试且易于维护代码的最佳实践。
适用场景: 当需要为多个组件共享状态的复杂应用集中管理状态时使用。它也适用于需要可预测的状态变更、时间旅行调试或服务端状态同步的场景。
运行要求: 无需脚本，仅包含说明和参考文档。在目标技术栈中实践时，假定已有 JavaScript 或 TypeScript 前端项目并安装了相应的状态管理库。

Overview

Implement scalable state management solutions using modern patterns and libraries to handle application state, side effects, and data flow across components.

When to Use

Complex application state
Multiple components sharing state
Predictable state mutations
Time-travel debugging needs
Server state synchronization

Quick Start

Minimal working example:

typescript

// store/userSlice.tsimport { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
interface User {  id: number;  name: string;  email: string;}
interface UserState {  items: User[];  loading: boolean;  error: string | null;}
const initialState: UserState = {  items: [],  loading: false,  error: null};
export const fetchUsers = createAsyncThunk(  'users/fetchUsers',  async (_, { rejectWithValue }) => {    try {// ... (see reference guides for full implementation)

// store/userSlice.tsimport { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
interface User {  id: number;  name: string;  email: string;}
interface UserState {  items: User[];  loading: boolean;  error: string | null;}
const initialState: UserState = {  items: [],  loading: false,  error: null};
export const fetchUsers = createAsyncThunk(  'users/fetchUsers',  async (_, { rejectWithValue }) => {    try {// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Redux with Redux Toolkit (React) [blocked]	Redux with Redux Toolkit (React)
Zustand (Lightweight State Management) [blocked]	Zustand (Lightweight State Management)
Context API + useReducer [blocked]	Context API + useReducer
MobX (Observable State) [blocked]	MobX (Observable State)

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/frontend-state-management提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

Frontend State Management

Frontend State Management

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices