04-code-organization/06-reducers.md

Reducers

Reducers

Reducers own state transitions in Vroq apps.

Reducers are one of the most important tools for keeping code understandable, debuggable, and well separated.

Purpose

Reducers define how state changes in response to actions.

They should be:

• predictable
• pure
• easy to inspect
• aligned with feature boundaries

Where reducers live

Reducers should live inside the feature folder that owns the state.

Example:

features/files/
  filesReducer.js

Reducers should then be registered in configureStore.js.

Reducer rules

Reducers should:

• handle only their own slice of state
• respond to explicit action types
• avoid side effects
• keep logic readable

Reducers should not:

• call APIs
• mutate unrelated state slices
• contain UI logic

Example structure

export function filesReducer(state, action) {
  const s = state || {};

  switch (action?.type) {
    case "FILES_ADD":
      return {
        ...s,
        items: [...(s.items || []), action.payload.file]
      };

    default:
      return state;
  }
}

Why reducers help debugging

Reducers provide a clear history of state transitions through actions.

This makes it easier to:

• inspect behavior
• replay actions
• reason about bugs

Final rule

Reducers should make state transitions explicit and predictable.