skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

store-data-structures

Design Zustand store structures with list arrays and detail maps for optimistic updates.

1|Updated May 9, 2026
Search Tags:#state management#zustand#typescript types#optimistic updates#reducer pattern#list detail caching
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill store-data-structures-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: store-data-structures
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/store-data-structures
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill store-data-structures-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the difficulty of structuring Zustand store state so list pages render quickly while detail pages cache correctly, especially when you need optimistic updates and per-item loading.

Core Features & Use Cases

  • Separate List and Detail: Use lightweight list items for fast rendering and full detail entities for cached views.
  • Use Map for Details: Cache multiple detail pages with a Record<string, Detail> and support optimistic edits.
  • Use Array for Lists: Render list/table/card UIs from simple arrays and refresh them as a whole.
  • Type hygiene with @lobechat/types: Keep store types aligned with @lobechat/types and avoid mixing in heavy database types.
  • Reducer-driven optimistic updates: Apply a typed reducer pattern for detail-map mutations so updates stay testable and ergonomic.

Quick Start

Structure your Zustand slice with xxxList: XxxListItem[] for list rendering and xxxDetailMap: Record<string, Xxx> for detail caching, then update the detail map via a reducer when doing optimistic changes.

Frequently Asked Questions about store-data-structures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Zustand store for list and detail pages?▼

Structure your Zustand store by using a lightweight array for list rendering and a Record keyed by id for detail caching. This separation ensures list pages render quickly while detail pages cache efficiently.

What is the best way to cache detail pages with Zustand?▼

Cache detail pages with Zustand by using a Record<string, Detail> map keyed by entity id. This approach supports multiple cached detail views and enables straightforward optimistic edits.

How do I apply optimistic updates to a Zustand detail map?▼

Apply optimistic updates to a Zustand detail map by using a typed reducer pattern. This dispatch mechanism mutates the detail map immutably, keeping updates testable and ergonomic.

When do I need separate list and detail types in state management?▼

You need separate list and detail types when building dashboards with navigable entity views. Using lightweight list items for tables and full detail entities for cached views prevents heavy data from slowing list rendering.

Can I use TypeScript types with Zustand store state?▼

You can align Zustand store state with TypeScript types to maintain type hygiene. Keeping store types aligned with @lobechat/types prevents mixing heavy database types into your UI architecture.

Does this Zustand store pattern support per-item loading state?▼

This Zustand store pattern supports per-item loading state tracking. It is designed for UI architectures that require separate list and detail pages, handling loading states alongside immutable optimistic mutations.

Related Skills

Explore More Software Engineering Skills→
kingmacthkingmacth

store-data-structures

Organize Zustand store state with list arrays and ID-keyed detail maps.

Community
Advanced
mDevsLabsmDevsLabs
1

store-data-structures

Structure Zustand stores with ListItem and Detail maps for typed state.

Community
Intermediate
mabdulraufmabdulrauf

store-data-structures

Organize Zustand store state into scalable list and detail data patterns.

Community
Advanced
IAFahimIAFahim

app-ui-redux

Implement Redux-style state management in Unity with App UI Redux.

Community
Advanced