---
title: "Redux Middleware"
slug: "redux-middleware"
updated: 2024-03-21T11:13:52Z
published: 2024-03-21T11:13:52Z
canonical: "docs.mapp.com/redux-middleware"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Redux Middleware

Redux middleware solves different problems than Express or Koa middleware but in a conceptually similar way. It provides a third-party extension point between dispatching an action and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

## Middleware with custom actions

| Value | Description | Data type | Required |
| --- | --- | --- | --- |
| actions | Extends your actions and executes custom tracking code after dispatching your action. | `Object` | - |
| arguments0 | Your current state. | `Object` | - |
| arguments1 | Your current action. | `Object` | - |

### Integration

```javascript
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/react";
```

```javascript
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/next";
```

```javascript
const enhancers = [];
const middleware = [webtrekkMiddleware({
    "increment": (state, action) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: state.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    },
    "decrement": (state, action) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: state.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    }
})];
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": state.count + 1; return state;
        case "decrement": state.count - 1; return state;
        default: return state;
    }
};
 
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
 
const store = createStore(reducer, composedEnhancers);
 
store.dispatch({type: "increment"});
```

## Dispatch with tracking data

| Value | Description | Data type | Required | Default value |
| --- | --- | --- | --- | --- |
| webtrekk.type | Defines which type of tracking data you are adding to the tracking pixel. You can use one of the following types: | `String` | Yes |  |
| `webtrekk/init` |
| `webtrekk/advanced` |
| `webtrekk/page` |
| `webtrekk/action` |
| `webtrekk/session` |
| `webtrekk/campaign` |
| `webtrekk/customer` |
| `webtrekk/product` |
| `webtrekk/products` |
| `webtrekk/order` |
| `webtrekk/extension` |
| `webtrekk/track` |
| `webtrekk/trackPage` |
| `webtrekk/trackAction` |
| webtrekk.data | Defines which data you are adding to the tracking pixel. | `Any` | Yes |  |
| `webtrekk/init`. See [init](/v1/docs/tracking-configuration-init). |
| `webtrekk/advanced`. See [advanced](/v1/docs/react-next-advanced). |
| `webtrekk/page`. See [page](/v1/docs/react-next-page). |
| `webtrekk/action`. See [action](/v1/docs/react-next-action). |
| `webtrekk/session`. See [session](/v1/docs/react-next-session). |
| `webtrekk/campaign`. See [campaign](/v1/docs/react-next-campaign). |
| `webtrekk/customer`. See [customer](/v1/docs/react-next-customer). |
| `webtrekk/product`. See [product](/v1/docs/react-next-product). |
| `webtrekk/products`. See [products](/v1/docs/react-next-product). |
| `webtrekk/order`. See [order](/v1/docs/react-next-order). |
| `webtrekk/track`. See [track](/v1/docs/react-next-track). |
| `webtrekk/trackPage`. See [trackPage](/v1/docs/react-next-trackpage). |
| `webtrekk/trackAction`. See [trackAction](/v1/docs/react-next-trackaction). |
| webtrekk.sendInstantly | If set to `true` , all added data is instantly tracked (you must not call `track`). | `Boolean` |  | `false` |

### Integration

```javascript
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/react";
```

```javascript
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/next";
```

```javascript
const enhancers = [];
const middleware = [webtrekkMiddleware()];
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": state.count + 1; return state;
        case "decrement": state.count - 1; return state;
        default: return state;
    }
};
 
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
 
const store = createStore(reducer, composedEnhancers);
 
store.dispatch({
    type: "increment",
    webtrekk: {
        type: "webtrekk/action",
        sendInstantly: true,
        data: {
            name: "increment",
            parameter: {1: store.getState().count + ""}
        }
    }
});
```