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.