Debugging with UnknownAction

Show how to use UnknownAction to create a debugging tool that triggers when an unhandled action type is dispatched.
<div id="app"></div>
This is a basic HTML structure with a div element where our demo will be rendered.
body { padding: 20px; font-family: Arial; }
Some basic CSS to make the output easier to read.
const reducer = (state, action) => {
    switch (action.type) {
        // ... handle known action types
            return unknownActionDebugger(state, action);
This is our reducer function containing a switch statement that delegates known actions and uses `unknownActionDebugger` for any unhandled action types.
function unknownActionDebugger(state, action) {
    console.error(`Unknown action type: ${action.type}`, action);
    // Implement any additional logic for unknown actions here
    // Returning the unchanged state as we didn't handle the action
    return state;
The `unknownActionDebugger` function logs an error to the console for unhandled action types. This makes it easier to identify and debug issues with action dispatching.
const initialState = { /* initial state object */ };
const store = Redux.createStore(reducer, initialState);

// Debugging an example unknown action
Setup of the Redux store with initial state and reducer. Also, a call to a function that intentionally dispatches an unknown action for demonstration.
function dispatchUnknownAction() {
    store.dispatch({ type: 'UNKNOWN_ACTION', payload: 'Some payload' });
This function dispatches an action with an unknown type to trigger the debugging tool.