---
title: Create a custom reducer
slug: configured-commerce/docs/create-a-custom-reducer
docTags: 
createdAt: 2026-08-13T10:46:27.000Z
---

This article provides an example custom reducer in *FrontEnd\modules\blueprints\example\src\Store\Reducers.ts*

1. Create a custom state for the reducer.

```typescript
type CounterState = Readonly<{
  total: number;
}>;
const initialCounterState: CounterState = { total: 0 };
```

2. Create the reducer. Configured Commerce uses [Immer reducers](https://redux-toolkit.js.org/usage/immer-reducers), but traditional reducers are also supported.

```typescript
import createTypedReducer, { createTypedReducerWithImmer } from "@insite/client-framework/Common/CreateTypedReducer";
import { Draft } from "immer";
const customReducerUsingImmer = createTypedReducerWithImmer(initialCounterState,  
{  
	"Custom/Immer/Add":  
		(draft: Draft<CounterState>, action: { amount: number }) => {  
			draft.total += action.amount;  
	},  
});

const customReducerTraditional = createTypedReducer(initialCounterState, {  
	"Custom/Traditional/Add":  
		(state: CounterState, action: { amount: number }): CounterState => ({  
		// You would normally use `...state` to copy the existing state, but this only has one property.  
		total: state.total + action.amount,  
	}),  
});
```

3. Add the `reducer` to the global list.

```typescript
import { AnyAction, reducers } from "@insite/client-framework/Store/Reducers";
(reducers as any).customReducerUsingImmer = customReducerUsingImmer;  
(reducers as any).customReducerTraditional = customReducerTraditional;
```

4. Create `CustomGlobalState` from `ApplicationState` and new states.

```typescript
export type CustomGlobalState = {
  customReducerUsingImmer: CounterState;
  customReducerTraditional: CounterState;
} & ApplicationState;
```

5. Create `CustomActions` from base `AnyActions` and new reducer types.

```typescript
type Reducers = {
  customReducerUsingImmer: typeof customReducerUsingImmer;
  customReducerTraditional: typeof customReducerTraditional;
};
export type CustomActions = Parameters\<Reducers[keyof Reducers]>[1] | AnyAction;
```

You can find the widget for the custom reducer at *FrontEnd\modules\blueprints\example\src\Widgets\ CustomReducerWidget.tsx*.