Contents x
      Reducer
      • 2 Minutes to read
      • Print
      • Dark
        Light
      Contents

      Reducer

      • 2 Minutes to read
      • Print
      • Dark
        Light
      Article summary

      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;

      Was this article helpful?
      What's Next