skills.rest
kingmacth
kingmacthCOMMUNITY
Explore all skills by this author →
GitHub

store-data-structures

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

Updated Dec 12, 2024
Search Tags:#cache#zustand#type-safety#state-management#immutable#data-structures#detail-map
One-click install
npx skills add https://github.com/kingmacth/lobe-chat --skill store-data-structures-kingmacth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: store-data-structures
Source: https://github.com/kingmacth/lobe-chat/tree/main/.agents/skills/store-data-structures
Command: npx skills add https://github.com/kingmacth/lobe-chat --skill store-data-structures-kingmacth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide explains how to structure data in Zustand stores for scalable and maintainable state management by separating list data from detail data, using maps for details, and enforcing type-safe patterns.

Core Features & Use Cases

  • Separate List and Detail types: Use a lightweight ListItem for lists and a full Detail type for detailed views.
  • Use Map for Details: Cache multiple detail pages keyed by ID to support optimistic updates and fast navigation.
  • Use Array for Lists: Lists are simple arrays for straightforward rendering and refreshing as a whole.
  • Type Safety & Reuse: Rely on appropriate type sources for cross-entity consistency, avoid database types in UI state.
  • Reducer-based mutations: Employ a reducer (with Immer) for immutable detail updates and predictable state changes.
  • Selectors & Documentation: Provide selectors for clean access and thorough in-code comments describing field exclusions and patterns.

Quick Start

Define your state with a dedicated list array and a detail map, then implement a reducer-driven update flow and selectors to access both data stores.

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 Zustand store state to cache detail pages by ID?▼

Structure Zustand store state by caching detail data in a map keyed by ID to support optimistic updates and fast navigation between cached details. This pattern separates list arrays from detail maps for scalable state management.

What is the best way to separate list and detail data in Zustand?▼

Separating list and detail data in Zustand involves using a lightweight ListItem type for simple arrays and a full Detail type for a map keyed by ID. This approach enables per-item loading states and predictable state changes.

How do I perform optimistic updates on a detail map in Zustand?▼

Perform optimistic updates on a detail map in Zustand by employing a reducer-based mutation flow with Immer. This ensures immutable detail updates and predictable state changes when modifying cached items.

Can I enforce type safety for list and detail entities in Zustand stores?▼

You can enforce type safety in Zustand stores by defining dedicated entity-specific types and avoiding database types in UI state. This ensures cross-entity consistency and scalable, type-safe state management.

When do I need a detail map for state management instead of a simple array?▼

You need a detail map for state management when supporting multiple cached detail pages keyed by ID, enabling fast navigation and per-item loading states. Arrays should be reserved for straightforward list rendering and refreshing as a whole.

Does this Zustand pattern support per-item loading states for detail pages?▼

Yes, the Zustand list and detail separation pattern explicitly supports per-item loading states. By caching details in a map keyed by ID, individual loading statuses can be tracked and updated via immutable reducers.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

zustand-patterns

Manage React client-side state with Zustand stores, slices, and middleware.

Community
Intermediate
StaysrStaysr

store-data-structures

Separate Zustand list arrays and detail maps with reducer-driven updates.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

zustand-store-patterns

Create Zustand stores with selectors, actions, and slice-based organization.

Official
Basic
abretonc7sabretonc7s

perf-state-management

Enforce immutable updates and pure reducers in Redux state management.

Community
Intermediate