Contents x
      Redux Middleware
      • 1 Minute to read
      • Print
      • Dark
        Light
      Contents

      Redux Middleware

      • 1 Minute to read
      • Print
      • Dark
        Light
      Article summary

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

      Was this article helpful?
      What's Next