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

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

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

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.
	`webtrekk/advanced`. See advanced.
	`webtrekk/page`. See page.
	`webtrekk/action`. See action.
	`webtrekk/session`. See session.
	`webtrekk/campaign`. See campaign.
	`webtrekk/customer`. See customer.
	`webtrekk/product`. See product.
	`webtrekk/products`. See products.
	`webtrekk/order`. See order.
	`webtrekk/track`. See track.
	`webtrekk/trackPage`. See trackPage.
	`webtrekk/trackAction`. See trackAction.
webtrekk.sendInstantly	If set to `true` , all added data is instantly tracked (you must not call `track`).	`Boolean`		`false`

Integration

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

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

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 + ""}
        }
    }
});