Blog>
Snippets

Creating a Reducer Function for WordPress State Management

Devise a reducer that handles actions related to theme modifications, ensuring immutability of the central state.
// Define action types
const SET_THEME = 'SET_THEME';
const TOGGLE_DARK_MODE = 'TOGGLE_DARK_MODE';

// Define initial state for the theme
const initialState = {
    currentTheme: 'default',
    darkMode: false
};

// Theme reducer managing theme-related actions
const themeReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_THEME:
            // Set a new theme without mutating the previous state
            return {
                ...state,
                currentTheme: action.payload
            };
        case TOGGLE_DARK_MODE:
            // Toggle dark mode without mutating the previous state
            return {
                ...state,
                darkMode: !state.darkMode
            };
        default:
            // Return the current state if no relevant action is found
            return state;
    }
};
This reducer function manages the state of the WordPress theme. It handles two actions, SET_THEME to change the current theme, and TOGGLE_DARK_MODE to toggle the dark mode feature on or off. The reducer maintains immutability by using the spread operator to create new state objects instead of modifying the existing one.