Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer.

Reducer with custom actions

ValueDescriptionData typeRequired
actionsExtends your actions and executes custom tracking code after dispatching your action.Object-
arguments0Your current state.Object-
arguments1Your current action.Object-
arguments2Value of your reducer function.Object-

Integration

import React, { useReducer } from "react";
import { WebtrekkSmartPixelReact, webtrekkReducer } from "@webtrekk-smart-pixel/react";
JS 
import React, { useReducer } from "react";
import { WebtrekkSmartPixelReact, webtrekkReducer } from "@webtrekk-smart-pixel/next";
JS 
const webtrekkCustomReducer = webtrekkReducer({
    "increment": (state, action, reducerValue) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: reducerValue.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    },
    "decrement": (state, action, reducerValue) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: reducerValue.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    }
});
 
const initialState = {count: 0};
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": return {count: state.count + 1};
        case "decrement": return {count: state.count - 1};
        default: throw new Error();
    }
};
const Counter = () => {
    const [state, dispatch] = useReducer(webtrekkCustomReducer(reducer), initialState);
 
    return (
        <div>
            Count: { state.count }
            <button onClick={() => dispatch({type: "increment"})}>+</button>
            <button onClick={() => dispatch({type: "decrement"})}>-</button>
        </div>
    );
};
 
class CounterButton extends React.Component {
    render() {
        return (
            <Counter />
        );
    }
}
 
export default CounterButton;
JS

Dispatch with tracking data

ValueDescriptionData typeRequiredDefault 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.AnyYes
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.sendInstantlyIf set to true , all added data is instantly tracked (you must not call track).Boolean
false

Integration

import React, { useReducer } from "react";
import { webtrekkReducer } from "@webtrekk-smart-pixel/react";
JS 
import React, { useReducer } from "react";
import { webtrekkReducer } from "@webtrekk-smart-pixel/next";
JS 
const webtrekkCustomReducer = webtrekkReducer();
 
const initialState = {count: 0};
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": return {count: state.count + 1};
        case "decrement": return {count: state.count - 1};
        default: throw new Error();
    }
};
const Counter = () => {
    const [state, dispatch] = useReducer(webtrekkCustomReducer(reducer), initialState);
 
    return (
        <div>
            Count: { state.count }
            <button onClick={() => dispatch({
                type: "increment",
                payload: {
                    webtrekk: {
                        type: "webtrekk/action",
                        sendInstantly: true,
                        data: {
                            name: "increment",
                            parameter: {1: state.count + ""}
                        }
                    }
                }
            })}>+</button>
            <button onClick={() => dispatch({
                type: "decrement",
                webtrekk: {
                    type: "webtrekk/action",
                    sendInstantly: true,
                    data: {
                        name: "decrement",
                        parameter: {1: state.count + ""}
                    }
                }
            })}>-</button>
        </div>
    );
};
 
class CounterButton extends React.Component {
    render() {
        return (
            <Counter />
        );
    }
}
 
export default CounterButton;
JS