如何确保WordPress自定义Store仅被注册一次？

我创建了custom-store.js文件，通过自定义Store从API获取数据，该Store被多个组件引用。但前端控制台多次出现警告：

data.min.js?ver=7c62e39…:2 Store "custom-store/counter" is already registered.
data.min.js?ver=7c62e39…:2 Store "custom-store/counter" is already registered.
...

我需要确保custom-store.js仅被注册一次，组件中调用数据的代码如下：

import counterStore from '../../store/custom-store.js';

const recipes = useSelect((select) => select(counterStore).getRecipe());

当前custom-store.js的代码存在无效的注册判断，导致重复注册：

import { createReduxStore, register } from '@wordpress/data';
...

const STORE_NAME = 'custom-store/counter';

...
...

const store = createReduxStore(STORE_NAME, {
    reducer,
    actions,
    selectors,
});

// 此代码无效：
const checkStore = select(STORE_NAME);
if (checkStore && typeof checkStore.getIcons !== 'function') {
    register(store);
}

register(store);

export default store;

重复警告的核心原因是每次导入模块时都会执行register(store)，且原有判断逻辑错误（未正确导入select，且未注册时select(STORE_NAME)返回undefined）。正确做法是利用@wordpress/data提供的hasStore方法判断Store是否已注册，仅在未注册时执行注册：

修改后的custom-store.js代码：

import { createReduxStore, register, hasStore } from '@wordpress/data';
...

const STORE_NAME = 'custom-store/counter';

...
...

const store = createReduxStore(STORE_NAME, {
    reducer,
    actions,
    selectors,
});

// 检查Store是否已注册，仅未注册时执行注册
if ( !hasStore( STORE_NAME ) ) {
    register( store );
}

export default store;

补充说明 #

• ES模块本身是单例模式，custom-store.js只会被解析执行一次，但问题出在模块内的注册逻辑未加判断，导致每次导入都尝试注册。
• 组件中的导入方式无需修改，多次导入不会重复执行模块代码，只会复用同一个导出的store对象。

内容的提问来源于stack exchange，提问作者Studio Wai