前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载QuerySiteConnectionStatus /是 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动型前端中用于自动发起网络请求、获取 Jetpack 站点与 WordPress.com 连接状态的数据查询组件。它不渲染任何 DOM只负责把 Redux 全局状态树中的数据准备好供同级兄弟组件消费。读完本文你将掌握该组件的用法、props 契约、底层 Redux 数据流action → reducer → selector以及对应单元测试的验证方式可直接在自有 Calypso 区块中落地复用。组件定位数据查询组件Query Component设计模式在 wp-calypso 的client/components/data/目录下存在一系列以Query前缀命名的组件它们遵循统一的“查询组件”设计模式渲染即发起请求无渲染输出数据写入全局状态树。QuerySiteConnectionStatus正是该模式在“站点连接状态”场景下的实现其完整源码位于 client/components/data/query-site-connection-status/index.jsx。从源码结构看该组件是一个典型的函数式组件核心逻辑只有三件事通过useSelector之外的方式这里直接使用getState读取当前是否已在请求该站点的连接状态若尚未在请求则派发requestConnectionStatus( siteId )action返回null即不渲染任何元素。// client/components/data/query-site-connection-status/index.jsx节选 const request ( siteId ) ( dispatch, getState ) { if ( siteId ! isRequestingSiteConnectionStatus( getState(), siteId ) ) { dispatch( requestConnectionStatus( siteId ) ); } }; export default function QuerySiteConnectionStatus( { siteId } ) { const dispatch useDispatch(); useEffect( () { dispatch( request( siteId ) ); }, [ dispatch, siteId ] ); return null; }关键设计点副作用收敛在useEffect中siteId变化会重新触发请求因此切换站点时组件会自动拉取新站点的连接状态幂等防重isRequestingSiteConnectionStatus守卫保证了同一站点在请求进行中不会被重复发起请求无渲染组件返回null页面布局完全不受影响与兄弟组件解耦。使用方式渲染即触发请求按官方 READMEclient/components/data/query-site-connection-status/README.md的说明使用该组件只需渲染它并传入siteId。它不接受任何 children也不向页面渲染任何元素你可以把它与依赖全局状态中已获取数据的兄弟组件并排使用import QuerySiteConnectionStatus from calypso/components/data/query-site-connection-status; export default function ExampleSiteComponent( { siteConnectionStatus, translate } ) { return ( div QuerySiteConnectionStatus siteId{ 12345678 } / { siteConnectionStatus ? translate( Site is connected ) : translate( Site is not connected ) } /div ); }Props 契约Prop类型必填说明siteIdNumber是需要获取 WordPress.com 连接状态的站点 ID该契约同样在组件源码中通过 PropTypes 声明PropTypes.number.isRequired缺失siteId会在开发环境抛出 PropTypes 警告。底层数据流从 action 到 Redux 状态组件本身只是“触发器”真正的数据获取由client/state/site-connection/模块完成。整体数据流为渲染 QuerySiteConnectionStatus(siteId) │ ▼ dispatch(requestConnectionStatus(siteId)) // actions.js │ ▼ SITE_CONNECTION_STATUS_REQUEST // 标记 requesting[siteId] true │ ▼ GET /rest/v1.1/jetpack-blogs/{siteId}/test-connection │ ├── 成功 ──► SITE_CONNECTION_STATUS_RECEIVE REQUEST_SUCCESS └── 失败 ──► SITE_CONNECTION_STATUS_REQUEST_FAILURE │ ▼ reducer 更新 state.siteConnection.{items, requesting} │ ▼ selector 读取getSiteConnectionStatus / isRequestingSiteConnectionStatusAction请求连接状态client/state/site-connection/actions.js 中的requestConnectionStatus( siteId )是一个 Redux thunk它先派发SITE_CONNECTION_STATUS_REQUEST标记请求开始通过wp.req.get( /jetpack-blogs/${ siteId }/test-connection )调用 WordPress.com REST API 的test-connection端点成功后派发SITE_CONNECTION_STATUS_RECEIVE携带response.connected布尔值与SITE_CONNECTION_STATUS_REQUEST_SUCCESS失败时派发SITE_CONNECTION_STATUS_REQUEST_FAILURE携带 error。export const requestConnectionStatus ( siteId ) { return ( dispatch ) { dispatch( { type: SITE_CONNECTION_STATUS_REQUEST, siteId } ); return wp.req .get( /jetpack-blogs/${ siteId }/test-connection ) .then( ( response ) { dispatch( { type: SITE_CONNECTION_STATUS_RECEIVE, siteId, status: response.connected } ); dispatch( { type: SITE_CONNECTION_STATUS_REQUEST_SUCCESS, siteId } ); } ) .catch( ( error ) { dispatch( { type: SITE_CONNECTION_STATUS_REQUEST_FAILURE, siteId, error } ); } ); }; };Reducer状态如何落库client/state/site-connection/reducer.js 通过combineReducers组合了两个子 reducer最终挂载到全局状态树的state.siteConnection键注册逻辑见 client/state/site-connection/init.jsitems以siteId为键存储连接状态布尔值。收到SITE_CONNECTION_STATUS_RECEIVE时写入[siteId]: status同一站点重复接收时覆盖旧值不同站点则累积实现为不可变展开...state。requesting以siteId为键标记请求进行中状态。REQUEST置trueREQUEST_SUCCESS/REQUEST_FAILURE置false。Selector兄弟组件如何消费数据数据落地后业务组件通过 selector 读取client/state/selectors/get-site-connection-status.js返回state.siteConnection.items[ siteId ] ?? null。站点未知或尚未收到状态时返回null收到后返回布尔值。这正是上方示例中siteConnectionStatus的数据来源client/state/selectors/is-requesting-site-connection-status.js返回state.siteConnection.requesting[ siteId ] ?? false用于组件内的防重判断。测试验证行为被单元测试完整锁定该模块的测试覆盖了 action 与 reducer 两个层面是理解组件行为的权威佐证。Action 测试client/state/site-connection/test/actions.js 使用useNockmock REST 请求验证了三种行为发起时派发SITE_CONNECTION_STATUS_REQUEST成功时依次派发SITE_CONNECTION_STATUS_RECEIVEstatus 为true与SITE_CONNECTION_STATUS_REQUEST_SUCCESSmock 的响应体形如{ connected: true, message: User is connected. }失败时派发SITE_CONNECTION_STATUS_REQUEST_FAILURE其中 error 的 message 为接口返回的This user is not authorized to test connection for this blog.对应 403 场景。这从侧面印证了接口契约test-connection端点返回connected布尔字段未授权用户会收到 403。Reducer 测试client/state/site-connection/test/reducer.js 使用deepFreeze保证不可变性验证了items默认空对象、写入、多站点累积、同站点覆盖四种行为requesting默认空对象、置true、成功后置false、失败后置false四种行为。实战建议与注意事项配合 selector 使用组件只负责触发请求展示逻辑应通过getSiteConnectionStatus等 selector 从 Redux 状态树读取避免在渲染层直接持有请求结果siteId必须有效源码中request对siteId做了 truthy 判断空值不会发起请求PropTypes 亦要求必填建议在渲染前确保站点对象已就绪请求状态区分null未知/未请求与false已确认未连接语义不同界面上的“加载中 / 未连接”态应分开处理只读使用该组件仅用于在页面中触发数据获取无需也不应直接修改仓库中的 Redux 模块。小结QuerySiteConnectionStatus是 wp-calypso 查询组件模式的精炼示例无渲染、副作用收敛、幂等防重配合client/state/site-connection/的 action/reducer/selector 三层结构将 Jetpack 站点的 WordPress.com 连接状态查询无缝接入全局状态管理。理解它的完整链路组件 → action → reducer → selector之后你可以轻松类比到client/components/data/下的其他查询组件快速上手 Calypso 的数据获取体系。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐深入解析 wp-calypso 的 QueryJetpackConnection /Jetpack 站点连接状态的声明式数据获取组件深入解析 wp calypso 的 QueryJetpackConnection / Jetpack 站点连接状态的声明式数据获取组件 导读 QueryJ前端CMSwp-calypso 数据查询组件深度解析QuerySiteProducts 站点产品数据获取实战指南wp calypso 数据查询组件深度解析QuerySiteProducts 站点产品数据获取实战指南 QuerySiteProducts / 是 Word前端CMSwp-calypso 中 QueryJetpackProductInstallStatus 组件解析Jetpack 产品安装状态的数据查询实践wp calypso 中 QueryJetpackProductInstallStatus 组件解析Jetpack 产品安装状态的数据查询实践 QueryJ前端CMS上一篇阅读APP书源一键导入终极指南3种快速方法高质量小说阅读书源全解析下一篇LiteGraph.js CI/CD流程优化测试与部署加速创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
