前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载QueryPostCounts是 wp-calypsoJavaScript 与 API 驱动的 WordPress.com 前端应用中专门用于管理文章数量post counts网络请求的 React 组件。本文以 client/components/data/query-post-counts/README.md 为骨架结合组件源码、Redux action/selector/reducer 实现与单元测试完整讲解它的用法、属性契约、底层请求链路、状态缓存与本地状态同步机制帮助你理解 Calypso 中数据查询组件 全局状态这一经典模式并能在自己的页面中正确接入。组件定位纯数据获取不渲染任何界面QueryPostCounts是一个典型的数据驱动型组件data component。它只负责一件事在组件挂载后向 WordPress.com API 发起一次文章计数请求并把结果写入全局应用状态Redux store。它不接收任何 children也不向页面渲染任何元素——组件内部直接return null。正因如此它的使用方式非常特殊你可以把它放在任何需要文章计数的兄弟组件旁边让兄弟组件通过useSelector之类的 Redux 选择器读取由它填充的数据实现数据获取与界面展示解耦。import QueryPostCounts from calypso/components/data/query-post-counts; export default function PostCount( { count } ) { return ( div QueryPostCounts siteId{ 3584907 } typepost / div{ count }/div /div ); }上面的示例直接取自 README.mdPostCount组件渲染QueryPostCounts /触发请求同时通过外层传入的countprop通常来自 Redux 选择器展示具体数值。QueryPostCounts本身对用户完全不可见。Props 契约QueryPostCounts只接受两个 props均为必填项这与 README 中的说明完全一致并且在 index.jsx 中通过PropTypes做了运行时校验Prop类型必填说明siteIdNumber是需要查询文章计数的站点 IDtypeString是需要查询计数的文章类型如post、pagesiteIdNumber必填要查询计数的站点 ID。例如 WordPress.com 站点3584907。该值会作为请求路径的一部分直接拼接进 API URL见下文底层请求链路同时作为 Redux state 中 counts 缓存的一级键。typeString必填要查询计数的文章类型post type例如post、page。它是请求 URL 的路径段也是 state 中 counts 缓存的二级键。若传入不存在的文章类型服务端会返回404与unknown_post_type错误码详见测试用例。源码实现组件如何工作组件源码 很短全部逻辑如下const request ( siteId, type ) ( dispatch, getState ) { if ( ! isRequestingPostCounts( getState(), siteId, type ) ) { dispatch( requestPostCounts( siteId, type ) ); } }; export default function QueryPostCounts( { siteId, type } ) { const dispatch useDispatch(); useEffect( () { if ( siteId type ) { dispatch( request( siteId, type ) ); } }, [ dispatch, siteId, type ] ); return null; }关键机制拆解useEffect触发请求组件挂载以及siteId/type变化时若两个 prop 都有值就 dispatch 一个 thunk。防重入检查thunk 内部先通过isRequestingPostCounts( getState(), siteId, type )判断该「站点 × 文章类型」组合的请求是否已在途只有未在请求中才真正发起requestPostCounts避免重复请求。effect 依赖数组[ dispatch, siteId, type ]保证只有这三者变化时才重新请求React 的dispatch引用稳定因此实际触发条件即siteId或type变化。渲染为空函数组件始终return null不产生任何 DOM因此可以安全地与兄弟组件并列放置。底层请求链路action thunk 与 REST APIQueryPostCounts最终调用的 action 是 client/state/posts/counts/actions.js 中的requestPostCounts。它先 dispatchPOST_COUNTS_REQUEST标记请求开始再通过wpcom.req发起请求export function requestPostCounts( siteId, postType ) { return ( dispatch ) { dispatch( { type: POST_COUNTS_REQUEST, postType, siteId } ); return wpcom.req .get( /sites/${ siteId }/post-counts/${ postType }, { apiNamespace: wpcom/v2 } ) .then( ( data ) { dispatch( receivePostCounts( siteId, postType, data.counts ) ); dispatch( { type: POST_COUNTS_REQUEST_SUCCESS, siteId, postType } ); } ) .catch( ( error ) { dispatch( { type: POST_COUNTS_REQUEST_FAILURE, siteId, postType, error } ); } ); }; }对应 REST 端点GET https://public-api.wordpress.com/wpcom/v2/sites/{siteId}/post-counts/{postType}命名空间wpcom/v2通过apiNamespace参数指定。成功dispatchreceivePostCounts( siteId, postType, data.counts )把data.counts写入 state随后 dispatchPOST_COUNTS_REQUEST_SUCCESS。失败dispatchPOST_COUNTS_REQUEST_FAILURE错误对象随 action 一并携带可供后续 UI 提示或日志上报。测试用例印证请求契约client/state/posts/counts/test/actions.js 使用useNock拦截真实 HTTP 请求完整验证了这条链路请求GET /wpcom/v2/sites/2916284/post-counts/post返回counts: { all: { publish: 2 }, mine: { publish: 1 } }对应 dispatch 顺序为POST_COUNTS_REQUEST→POST_COUNTS_RECEIVE→POST_COUNTS_REQUEST_SUCCESS请求不存在的类型/post-counts/foo返回404错误码unknown_post_type对应 dispatchPOST_COUNTS_REQUEST_FAILURE。从测试可看出响应数据的结构约定counts是一个以all站点全部文章和mine当前用户文章为顶层键、以文章状态如publish为二级键、值为数量的嵌套对象。读取结果Redux 选择器数据写进 store 后由 client/state/posts/counts/selectors.js 提供读取入口选择器签名返回值isRequestingPostCounts( state, siteId, postType )该组合是否正在请求中布尔值getAllPostCounts( state, siteId, postType )站点全部用户的计数对象按状态键控如{ publish: 2 }getAllPostCount( state, siteId, postType, status )指定状态的文章数无数据时返回null有数据但该状态缺失时返回0getMyPostCounts( state, siteId, postType )当前用户的计数对象按状态键控典型使用方式在兄弟组件中import { useSelector } from react-redux; import { getAllPostCount } from calypso/state/posts/counts/selectors; const publishedCount useSelector( ( state ) getAllPostCount( state, siteId, post, publish ) );状态存储reducer 与本地状态同步client/state/posts/counts/reducer.js 由requesting与counts两个子 reducer 组合而成requesting维护state.posts.counts.requesting[siteId][postType]布尔值。POST_COUNTS_REQUEST置truePOST_COUNTS_REQUEST_SUCCESS/POST_COUNTS_REQUEST_FAILURE置false。这正是isRequestingPostCounts防重入检查的数据来源。counts维护state.posts.counts.counts[siteId][postType][all|mine][status]的数值树由POST_COUNTS_RECEIVE写入服务端数据。值得注意的深层机制countsreducer 内部用闭包变量postStatuses记录了本端已知的每篇文章按siteId,postId序列化键的type、status与authorId从而在以下本地 action 到来时不重新请求 API 也能增量修正计数POSTS_RECEIVE当收到的文章状态发生变化时自动做状态迁移计数调整旧状态减一、新状态加一POST_SAVE保存文章后按新状态迁移计数POST_DELETE文章删除时把计数按deleted状态处理且deleted状态不会新增计数CURRENT_USER_RECEIVE记录当前用户 ID用于判断某篇文章是否计入mine子键POST_COUNTS_RESET_INTERNAL_STATE清空内部追踪状态。也就是说QueryPostCounts获取的是服务端基线快照而之后的增删改操作由本地 reducer 以 O(1) 级成本即时同步保证计数在会话内始终与实际文章状态一致同时避免频繁发起网络请求。最佳实践小结作为兄弟组件并列使用把QueryPostCounts siteId{ siteId } typepost /放在需要计数的 UI 组件旁数据统一从 Redux 选择器读取。必填 props 不要省略siteId与type均必填任一为空时组件不会发起请求源码中if ( siteId type )的判断。不要重复发起请求组件内置了isRequestingPostCounts防重入检查兄弟组件无需自行做请求去重。利用本地同步机制文章增删改后计数会自动调整无需再次渲染QueryPostCounts /。响应结构与文章类型type直接决定 API 路径与 state 键务必使用服务端认可的文章类型如post、page否则会得到unknown_post_type错误。参考文件索引组件文档client/components/data/query-post-counts/README.md组件实现client/components/data/query-post-counts/index.jsxAction 实现client/state/posts/counts/actions.js选择器实现client/state/posts/counts/selectors.jsReducer 实现client/state/posts/counts/reducer.jsAction 测试client/state/posts/counts/test/actions.js选择器测试client/state/posts/counts/test/selectors.js赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso 数据获取组件 QuerySites 完全指南React Redux 下的站点网络请求管理wp calypso 数据获取组件 QuerySites 完全指南React Redux 下的站点网络请求管理 本篇技术指南聚焦 WordPress.co前端CMSwp-calypso 数据查询组件详解QueryJetpackScanHistory 与 Jetpack Scan History 请求链路wp calypso 数据查询组件详解QueryJetpackScanHistory 与 Jetpack Scan History 请求链路 QueryJet前端CMSwp-calypso LanguagePicker 组件完全指南从 Props 到源码实现wp calypso LanguagePicker 组件完全指南从 Props 到源码实现 导读 LanguagePicker 是 wp calypso 中用前端CMS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考