store-data-structures

Designs Zustand store state with list arrays, detail maps, and typed reducers.

74|11|Updated Jul 4, 2024
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill store-data-structures-opensourceagi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: store-data-structures
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/store-data-structures
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill store-data-structures-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend teams often structure Zustand store state inconsistently, causing slow list rendering, lost detail caches, and tangled optimistic updates. This Skill provides a repeatable pattern for separating list and detail data so stores stay fast and maintainable. ## Core Features & Use Cases - List/Detail Separation: Use simple arrays for list pages and Record<string, Detail> maps for caching multiple detail pages with per-item loading states. - Typed Reducer Pattern: Wire discriminated-union actions through an Immer-based reducer for testable optimistic updates on detail maps. - Type Organization Rules: Define Detail and ListItem types per entity in @lobechat/types, keeping heavy fields out of list payloads. - Use Case: When building a benchmark admin UI, structure the store so the list page renders lightweight rows while each detail page caches independently and updates optimistically before the API responds. ## Quick Start Ask the AI to design the Zustand store state structure for a new entity following the store-data-structures patterns.

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 for list and detail pages?

Use a simple array for list data (e.g. benchmarkList: ListItem[]) and a Record<string, Detail> map for detail data. The map caches multiple detail pages simultaneously and supports per-item loading states via a loadingIds array.

How to implement optimistic updates in Zustand with a reducer?

Define a discriminated union of action types and a pure reducer using Immer's produce. Expose internal dispatch methods on the slice that run the reducer and call set only when the map actually changed, keeping mutations testable.

Should list item types extend detail types in TypeScript?

No. List item types should be standalone subsets that exclude heavy fields like content, rubrics, or editor state. Extending the detail type pulls those heavy fields back into list payloads, slowing list rendering.

When should I use a Map versus an array in Zustand state?

Use an array for list display data that refreshes as a whole without per-item mutation. Use a Record map for detail data when you need multi-entity caching, optimistic updates, and per-item loading states.

Can I use database types directly in Zustand stores?

No. Stores should import types from a shared types package such as @lobechat/types, not from the database layer. This keeps client state decoupled from persistence schemas and avoids leaking server-only fields.