effector-patterns

Guide Effector state management with sample, attach, and combine patterns.

15|3|Updated Apr 29, 2025
One-click install
npx skills add https://github.com/chaingraphlabs/chaingraph --skill effector-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: effector-patterns
Source: https://github.com/chaingraphlabs/chaingraph/tree/main/.claude/skills/effector-patterns
Command: npx skills add https://github.com/chaingraphlabs/chaingraph --skill effector-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidance for building robust reactive state management with Effector, highlighting common anti-patterns and safer patterns for ChainGraph frontend projects.

Core Features & Use Cases

  • Patterns for using sample, attach, and combine to derive state and drive effects.
  • Clear anti-patterns to avoid (e.g., using getState() inside reducers) with safe alternatives.
  • Practical examples and best practices for domain-based stores, events, and effects in frontend apps.

Quick Start

Review existing Effector stores and replace unsafe patterns with the recommended reactive patterns. Use sample to derive derived stores, attach to inject dependencies, and combine to aggregate state.

Frequently Asked Questions about effector-patterns

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

FAQPage Schema
What are the best practices for reactive state management with Effector?

Best practices for reactive state management with Effector include using sample to derive state, attach to inject dependencies, combine to aggregate stores, and domain composition to organize events and effects safely.

How do I use sample and attach to drive effects in Effector?

Use sample to derive reactive state and trigger effects based on specific store combinations, and use attach to inject dependencies into effects, ensuring robust and testable functional patterns in your frontend code.

Why should I avoid using getState() inside Effector reducers?

Using getState() inside Effector reducers breaks reactive state consistency and is a common anti-pattern; safe alternatives include using sample to pass the necessary state explicitly into your events and effects.

How do I structure domain-based stores, events, and effects in Effector?

Structure domain-based stores, events, and effects by grouping related state logic into domains, using combine to aggregate multiple stores and sample to derive state, ensuring safe reactive code organization.

Can I use Effector patterns for complex frontend state composition?

Effector patterns support complex frontend state composition through combine for aggregating state, sample for deriving new stores, and attach for effect composition, enabling robust reactive code without unsafe state access.

What are common Effector anti-patterns to avoid in frontend apps?

Common Effector anti-patterns include using getState() inside reducers and bypassing reactive flows; safe alternatives use sample, attach, and combine to maintain pure functional state management and prevent inconsistent reactive updates.