Registering a Custom Data Store in WordPress @wordpress/data

Previously in this course, we explored the Understanding WordPress Data Store Architecture | @wordpress/data Guide to grasp the theoretical foundations of the store/selector/action pattern. In this lesson, we move from theory to implementation by creating and registering a custom data store for our Knowledge Base plugin.

By centralizing our state, we avoid "prop drilling" and ensure that multiple components can access the same source of truth for our Knowledge Base articles.

The Mechanics of Store Registration

In WordPress, state management is handled by a global registry provided by the @wordpress/data package. To add our own data to this ecosystem, we use createReduxStore, which follows the standard Redux pattern but is optimized for the WordPress environment.

Registering a store involves three primary steps:

1. Defining the Store Configuration: Creating an object that contains our initial state, selectors, actions, and reducers.
2. Creating the Store: Using createReduxStore to generate the store instance.
3. Registration: Passing that instance to the register method of the wp.data registry.

Worked Example: Scaffolding the Knowledge Base Store

Let's create a new file, src/store/index.js, to house our store configuration. For now, we will focus on defining the initial state and performing the registration.

JAVASCRIPT
/**
 * External dependencies
 */
import { createReduxStore, register } from CE9178">'@wordpress/data';

/**
 * Initial State
 */
const DEFAULT_STATE = {
    items: [],
    isFetching: false,
    error: null,
};

/**
 * Store Configuration
 */
const storeConfig = {
    reducer(state = DEFAULT_STATE, action) {
        // We will fill this in next lesson
        return state;
    },
    selectors: {
        getItems(state) {
            return state.items;
        }
    },
    actions: {
        setItems(items) {
            return { type: CE9178">'SET_ITEMS', items };
        }
    }
};

/**
 * Create and register the store
 */
const store = createReduxStore(CE9178">'kb/knowledge-base', storeConfig);
register(store);

Integrating into the Plugin

Once the store is registered, it becomes available globally in the WordPress admin. You must ensure this file is imported in your main entry point (e.g., src/index.js) so that the code executes when the page loads.

Simply adding import './store'; at the top of your main entry point ensures that the registration logic runs before your React components attempt to access the store via useSelect or useDispatch.

Hands-on Exercise

1. Create a src/store directory in your plugin folder.
2. Create src/store/index.js and implement the createReduxStore call using the namespace kb/knowledge-base.
3. Import this file in your main src/index.js entry point.
4. Open your browser console on the admin page and type wp.data.select('kb/knowledge-base').getItems(). Verify that it returns the empty array from your DEFAULT_STATE.

Common Pitfalls

• Namespace Collisions: Always prefix your store name (e.g., kb/). Using a generic name like data will conflict with core WordPress stores and cause unpredictable behavior.
• Late Registration: If you try to access the store before the registration code runs, the registry will return undefined. Always import your store file at the very top of your application entry point.
• Ignoring the Registry: Remember that @wordpress/data is a singleton registry. You don't need to pass the store instance down through props; once registered, any component in your React tree can access it using the standard hooks.

Recap

We have successfully moved beyond local component state—which we previously managed using techniques like those described in Handling Asynchronous State in React for WordPress Plugins—into a formal, global state management pattern. By using createReduxStore and register, we have created a scalable foundation for the Knowledge Base plugin that allows for complex data interactions across the entire admin dashboard.

Up next: We will implement the logic to query this store using custom selectors and memoization.