Redux-Doghouse: Creating reusable React-Redux components through scoping

Redux-Doghouse is a Redux library for creating scoped actions and reducers, allowing reusable React/Redux components to coexist without responding to one another’s actions. It preserves Redux’s ability to coordinate state across an application while ensuring that component-local actions affect only the instance that dispatched them. Datadog developed it to support reusable Query Editors within larger editors such as dashboards and Expression Editors.

The Problem with Reusable Redux Components

• Redux reducers respond to actions based on their TYPE.
• If multiple instances of the same component share a Redux store, an action such as MY_ACTION can update every instance.
• This is useful for application-wide events, but incorrect when an action should affect only one component instance.
• Refactoring each component to use unique action types would undermine its reusability and independence.

Scoped Actions and Reducers

• Redux-Doghouse adds a unique scope to each component instance’s actions.
• Reducers are wrapped so that a scoped action is routed only to the matching component instance.
• A component can therefore continue using generic action types such as MY_ACTION while remaining isolated from sibling instances.
• Higher-level components can still observe and respond to those actions, preserving Redux’s cross-component coordination.
• The parent can extend a child component’s behavior without requiring the child to know about its parent.

Datadog’s Query Editor Use Case

• Datadog’s dashboards contain Query Editor components for editing individual metrics.
• Query Editors were rebuilt as miniature React/Redux applications so they could be reused in:
  • Dashboard graph editors
  • Monitor editors
  • Notebook editors
  • Other application contexts
• The Expression Editor needed to render an arbitrary number of Query Editors and combine their queries with expressions such as a + b / c.

Coordinating Child Editors

The Expression Editor needed to:

• Validate that expressions reference existing query labels, rejecting inputs such as a + d when query d does not exist.
• Enforce compatible group by values across queries:
  • Queries may share a value such as host.
  • Some queries may have no grouping.
  • Non-empty groupings such as host and device cannot be mixed.
• Ensure that a SET_GROUP action from Query Editor A affects only A, not Query Editor B.
• Allow the Expression Editor itself to observe SET_GROUP and enforce rules across all queries.
• Keep Query Editors independent so they remain usable outside an Expression Editor.

How Doghouse Solves It

• The parent assigns each Query Editor a scope, such as A, B, or C.
• Actions dispatched by each editor receive metadata identifying that scope.
• The parent wraps each editor’s reducers and routes actions only to the reducer with the matching scope.
• The Expression Editor can still listen to the same actions at a higher level and apply cross-editor validation or coordination.

Redux-Doghouse is most useful when reusable Redux components need isolated local behavior while still participating in a shared application state. It lets teams organize actions and reducers by component, rather than forcing all Redux logic to be structured around entire views.