Reducer

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

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`	-
arguments2	Value of your reducer function.	`Object`	-

Integration

import React, { useReducer } from "react";
import { WebtrekkSmartPixelReact, webtrekkReducer } from "@webtrekk-smart-pixel/react";

import React, { useReducer } from "react";
import { WebtrekkSmartPixelReact, webtrekkReducer } from "@webtrekk-smart-pixel/next";

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;

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 React, { useReducer } from "react";
import { webtrekkReducer } from "@webtrekk-smart-pixel/react";

import React, { useReducer } from "react";
import { webtrekkReducer } from "@webtrekk-smart-pixel/next";

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;