# How Does Compose Work for Combining Store Enhancers in Redux

> Learn how Redux compose chains store enhancers right-to-left for effective middleware pipelines. Optimize your Redux store creation with this essential utility.

- Repository: [Redux/redux](https://github.com/reduxjs/redux)
- Tags: internals
- Published: 2026-03-05

---

**Redux's `compose` utility chains store enhancers by applying function composition from right-to-left, creating a pipeline where each enhancer receives the output of the one to its right and returns an enhanced `createStore` function.**

When building complex Redux applications, you often need to combine multiple store enhancers—such as middleware, DevTools integration, and custom wrappers—into a single enhancement pipeline. Understanding how `compose` works for combining store enhancers is essential for configuring your Redux store correctly. In the `reduxjs/redux` repository, the `compose` function in [`src/compose.ts`](https://github.com/reduxjs/redux/blob/main/src/compose.ts) provides the mechanism that makes this chaining possible.

## What Is a Store Enhancer?

A **store enhancer** is a higher-order function that takes the original `createStore` implementation as its argument and returns a new, "enhanced" version of `createStore`. According to the source code in [`src/createStore.ts`](https://github.com/reduxjs/redux/blob/main/src/createStore.ts), enhancers allow you to extend the store's capabilities without modifying the core logic. Common examples include `applyMiddleware` (defined in [`src/applyMiddleware.ts`](https://github.com/reduxjs/redux/blob/main/src/applyMiddleware.ts)), Redux DevTools integration, and custom persistence layers.

## How Compose Works for Combining Store Enhancers

The `compose` function implements **function composition from right-to-left**, mathematically represented as `compose(f, g, h) ≡ (...args) => f(g(h(...args)))`. When applied to store enhancers, this means each enhancer receives the output of the enhancer to its right, building a nested chain of enhanced `createStore` functions.

### Right-to-Left Execution Order

When you call `compose(enhancerA, enhancerB, enhancerC)`, the execution flows from right to left:

1. **enhancerC** receives the base `createStore` and returns an enhanced version.
2. **enhancerB** receives the result from enhancerC and wraps it further.
3. **enhancerA** receives the result from enhancerB and applies the final enhancement.

The right-most enhancer runs first because it is closest to the original `createStore` call, while the left-most enhancer provides the final interface that `createStore` invokes.

### Internal Implementation

The implementation in [`src/compose.ts`](https://github.com/reduxjs/redux/blob/main/src/compose.ts) handles three distinct cases:

- **No arguments**: Returns the identity function `(arg) => arg`.
- **Single function**: Returns that function unchanged.
- **Multiple functions**: Uses `Array.prototype.reduce` to nest calls: `funcs.reduce((a, b) => (...args) => a(b(...args)))`.

This reduction pattern creates the right-to-left composition chain where each function `b` is executed before function `a`.

## Practical Example: Composing Multiple Enhancers

Here's a real-world configuration combining middleware and DevTools:

```typescript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  undefined,
  compose(
    applyMiddleware(thunk, logger),  // Runs second (left)
    devToolsEnhancer({ trace: true }) // Runs first (right)
  )
);

```

In this example from [`src/applyMiddleware.ts`](https://github.com/reduxjs/redux/blob/main/src/applyMiddleware.ts), `applyMiddleware` returns a store enhancer that adds middleware capabilities. The `devToolsEnhancer` runs first (right-most), wrapping `createStore` with DevTools instrumentation. Then `applyMiddleware` receives that enhanced creator and adds the middleware pipeline. The final composed function is passed to `createStore` in [`src/createStore.ts`](https://github.com/reduxjs/redux/blob/main/src/createStore.ts).

## Summary

- **Store enhancers** are higher-order functions that wrap `createStore` to add capabilities.
- **`compose`** chains multiple enhancers using right-to-left function composition.
- The **right-most enhancer** executes first, closest to the base `createStore`.
- The implementation in [`src/compose.ts`](https://github.com/reduxjs/redux/blob/main/src/compose.ts) uses `reduce` to nest function calls: `(...args) => a(b(...args))`.
- **`applyMiddleware`** in [`src/applyMiddleware.ts`](https://github.com/reduxjs/redux/blob/main/src/applyMiddleware.ts) is the most common enhancer used with `compose`.

## Frequently Asked Questions

### What happens if I pass only one enhancer to compose?

If you pass a single function to `compose`, it returns that function unchanged. This is handled as a special case in [`src/compose.ts`](https://github.com/reduxjs/redux/blob/main/src/compose.ts) to avoid unnecessary wrapper overhead while maintaining consistent behavior.

### Why does Redux compose work right-to-left instead of left-to-right?

Redux uses right-to-left composition to match mathematical function composition notation and to ensure that the enhancer closest to `createStore` (the right-most) executes first. This creates a natural nesting where each subsequent enhancer wraps the result of the previous one, maintaining the expected execution order for middleware and instrumentation.

### Can I use compose without createStore?

Yes. While `compose` is primarily designed for combining store enhancers, it is a generic utility function exported from `redux` that can compose any functions where the output type of one matches the input type of the next. It works with any functions, not just Redux-specific ones.

### How does applyMiddleware use compose internally?

The `applyMiddleware` function in [`src/applyMiddleware.ts`](https://github.com/reduxjs/redux/blob/main/src/applyMiddleware.ts) uses `compose` to chain the middleware functions themselves. It composes the middleware chain so that each middleware receives the `dispatch` from the middleware to its right, creating the pipeline that processes actions before they reach the reducer.