state-selectors

Create colocated selectors that derive saga state views for React-Redux components.

Updated Apr 27, 2026
One-click install
npx skills add https://github.com/grvpanchal/elegant-opencode --skill state-selectors
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: state-selectors
Source: https://github.com/grvpanchal/elegant-opencode/tree/main/skills/state-selectors
Command: npx skills add https://github.com/grvpanchal/elegant-opencode --skill state-selectors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Selector patterns colocated with each slice to derive view data from the saga state shape (isLoading/isContentLoading/isActionLoading/error/<items>/<current>), simplifying UI code and tests.

Core Features & Use Cases

  • Colocated selectors: keep state-derived views next to their slices (e.g. todo.selectors.js) for clarity and reuse.
  • Lifecycle and cross-slice projections: support isContentLoading, isActionLoading, getVisibleX selectors across slices.
  • Practical guidance: follow best practices for pass-through and cross-slice selectors to keep components lean.

Quick Start

Create a new selector module next to your slice (e.g., todo.selectors.js) and export get functions that derive data from the state, then consume them with useSelector in your components.

Frequently Asked Questions about state-selectors

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

FAQPage Schema
How do I organize Redux selectors for derived state in a saga-driven React app?

You organize Redux selectors by colocating them with their corresponding slices, creating modules like todo.selectors.js that export get functions to derive view data directly from the state shape and simplify consumption.

What is the best way to handle cross-slice selectors in React-Redux?

The best way to handle cross-slice selectors is through composition, combining pass-through accessors and memoized projections across multiple saga slices to derive complex view data while keeping UI components lean.

How do I create memoized selectors for loading states like isContentLoading and isActionLoading?

You create memoized selectors by exporting get functions next to each slice that derive lifecycle states like isContentLoading and isActionLoading from the raw saga state shape, applying optional memoized projections for performance.

Can I use colocated selectors with multiple Redux saga slices?

Yes, colocated selectors support cross-slice composition, allowing you to combine derived data from multiple saga slices using pass-through accessors and memoized projections to satisfy complex view requirements.

Why should I colocate selectors with my Redux slices instead of centralizing them?

Colocating selectors with Redux slices keeps state-derived views next to their source for clarity and reuse, hiding complex state shapes from components and simplifying both UI code and tests through pass-through accessors.

Do I need memoization for pass-through selectors in Redux?

Memoization is optional for pass-through selectors in Redux, but applying memoized projections becomes valuable when deriving complex data across single or multiple saga slices to prevent unnecessary component re-renders.