前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载暂存站点Staging Site是 WordPress.com 在发布前进行内容验证、代码测试与回滚演练的关键能力。本文聚焦 Calypso 前端状态管理库中负责「暂存站点自动化迁移/回滚状态」的 reducer 模块围绕 client/state/staging-site/README.md 展开逐层拆解状态值语义、reducer 数据流、selector 查询 API 与持久化机制。读完你将掌握如何基于stagingSite状态子树判断一次暂存站点创建transfer或删除revert是否正在进行、是否已完成并能在自己的组件中安全、准确地消费这些状态。一、模块定位为「进行中的迁移」而生的独立 reducer在 Calypso 庞大的client/state状态树中stagingSite是一个刻意「瘦身」的 reducer它只关心一件事——暂存站点的 automated-transfer自动化迁移状态。README 开宗明义地写道In this reducer, we store the automated-transfer status for the staging site.之所以要从完整的 automated-transfer 状态中拆出独立 reducerREADME 给出了两个核心动机数据简化真实的后端迁移状态机非常复杂而 UI 层真正关心的是start - in progress - end这一段线性序列因此 reducer 只保留这一最小必要信息归属对象特殊状态被写入生产站点production siteID之下而不是暂存站点自身。原因在于迁移transfer一开始暂存站点就处于不可用状态the staging site is unavailable from the start of the transferring process客户端无法以暂存站点的 ID 为 key 去查询它的状态只能把状态挂到生产站点上。从源码结构看该模块共由 6 个文件组成职责划分清晰reducer.jsreducer 定义与持久化包装actions.js唯一 action creatorsetStagingSiteStatusconstants.ts状态枚举StagingSiteStatusschema.js持久化 JSON Schema 校验init.js向 Redux store 注册 reducerselectors/4 个状态查询 selector。二、状态值语义六种状态 一个空值README 用一张表格完整定义了status字段的全部取值及其含义这也是理解整个模块的钥匙。结合 constants.ts 的源码实现各状态值整理如下StatusMeaningREADME 原文语义StagingSiteStatus 中的实际值COMPLETERecords exist for a transfer, and it has previously finished. 存在迁移记录且此前已成功完成transferStates.COMPLETEREVERTING后端返回信息表明暂存站点回滚删除流程正在进行revertingREVERTED暂存站点已被成功删除transferStates.REVERTEDTRANSFERRING迁移至 AtomicWordPress.com 托管运行时正在进行中transferringINITIATE_REVERTING回滚操作已发起客户端尚无 automated-transfer 数据initiate revertingINITIATE_TRANSFERRING迁移操作已发起客户端尚无 automated-transfer 数据initiate transferringfalsey如UNSET的Calypso 中不存在任何迁移相关信息值得注意的细节COMPLETE与REVERTED直接复用calypso/state/automated-transfer/constants中transferStates的取值而TRANSFERRING/REVERTING/ 两个INITIATE_*则是本模块自定义的字符串字面量。这正是 README 所说「把 transferStates 对象裁剪为只保留我们关心的状态」的代码体现——constants.ts 的注释进一步说明状态对象到 transferStates 的映射发生在staging-site-card/index.js组件中。从语义上可以把这些值分成三组终态TerminalCOMPLETE、REVERTED以及代表「从未发生迁移」的UNSET与NONE——它们都表示当前没有进行中的操作迁移进行态TransferringINITIATE_TRANSFERRING客户端刚发起、尚无后端数据→TRANSFERRING后端确认迁移进行中回滚进行态RevertingINITIATE_REVERTING→REVERTING。三、Reducer 实现keyedReducer 状态持久化reducer.js 的完整实现如下import { withStorageKey } from automattic/state-utils; import { SITE_STAGING_STATUS_SET as SET_STATUS } from calypso/state/action-types; import { combineReducers, keyedReducer, withSchemaValidation, withPersistence, } from calypso/state/utils; import { StagingSiteStatus } from ./constants; import { stagingSite as schema } from ./schema; export const status withPersistence( ( state StagingSiteStatus.UNSET, action ) { switch ( action.type ) { case SET_STATUS: return action.status || StagingSiteStatus.UNSET; default: return state; } } ); export const siteReducer combineReducers( { status, } ); // state is a map of transfer sub-states // keyed by the associated site id const validatedReducer withSchemaValidation( schema, keyedReducer( siteId, siteReducer ) ); const stagingSiteReducer withStorageKey( stagingSite, validatedReducer ); export default stagingSiteReducer;3.1 内层statusreducer默认状态为StagingSiteStatus.UNSET即空字符串对应 README 表格中的falsey情形仅响应SITE_STAGING_STATUS_SET一种 action 类型处理逻辑为action.status || StagingSiteStatus.UNSET当传入的status为假值时如null、undefined、自动回落为UNSET保证状态树中始终是一个可预期的字符串。3.2 中层siteReducer与 keyedReducersiteReducer通过combineReducers组合出{ status }形状随后keyedReducer( siteId, siteReducer )以 action 中的siteId字段为 key为每个站点生成一份独立的子状态。最终的状态树结构为stagingSite: { 12345: { status: transferring }, 67890: { status: complete }, ... }这正好与 schema.js 中patternProperties: { ^\\d$: ... }的约束对应——顶层对象的 key 必须是数字字符串形式的站点 ID每个站点下的合法字段是status字符串类型。3.3 外层持久化包装withSchemaValidation( schema, ... )在序列化/反序列化时用 schema.js 校验状态树避免非法数据进入持久化存储withStorageKey( stagingSite, ... )指定持久化存储 key 为stagingSite最终由 init.js 调用registerReducer( [ stagingSite ], stagingSiteReducer )注册进 Calypso 的 Redux store。test/reducer.js 中的测试用例验证了这一持久化行为以SITE_ID 12345、status: StagingSiteStatus.COMPLETE构造状态经serialize后root()序列化结果中该站点仍保留status字段经deserialize反序列化后status依然等于COMPLETE——说明status是唯一需要持久化的键且能完整往返。四、Action 与 Action Type模块只暴露一个 action creator actions.jsimport { SITE_STAGING_STATUS_SET } from calypso/state/action-types; import calypso/state/staging-site/init; export const setStagingSiteStatus ( siteId, status ) ( { type: SITE_STAGING_STATUS_SET, siteId, status, } );typeSITE_STAGING_STATUS_SET定义于 client/state/action-types.ts由 reducer 中的SET_STATUS别名消费siteId站点 ID。如前所述这里应当传入生产站点的 ID因为状态被 keyed 到生产站点之下status新的状态值类型为string | null见 JSDoc可为 README 表格中的任意值或nullnull 会被 reducer 兜底为UNSET。在组件中典型用法形如dispatch( setStagingSiteStatus( siteId, StagingSiteStatus.TRANSFERRING ) )用于在 UI 发起迁移/回滚操作时同步本地状态。五、Selector 查询 API如何读取状态selectors/index.ts 统一导出了 4 个查询函数全部通过getStagingSiteInfo( state, siteId )先取出某站点生产站点 ID的子状态再作判断。它们也是组件消费该模块状态的标准入口。5.1 getStagingSiteStatus —— 取原始状态值定义get-staging-site-status.ts签名getStagingSiteStatus( state, siteId ) string | null语义返回stagingSite[siteId].status的原始字符串若siteId为空或该站点无任何记录则回落为StagingSiteStatus.UNSET。对应 README 表格中falsey情形——Calypso 中不存在任何迁移信息。5.2 getIsStagingSiteStatusComplete —— 是否处于「完成/空闲」态定义get-is-staging-site-status-complete.ts签名getIsStagingSiteStatusComplete( state, siteId ) boolean语义当状态为COMPLETE、REVERTED、NONE或UNSET之一时返回true。即迁移已成功结束、站点已删除或从未进行过迁移——UI 可以据此隐藏 loading 态、展示操作按钮。5.3 getIsStagingSiteInTransition —— 是否处于「进行中」态定义get-is-staging-site-in-transition.ts签名getIsStagingSiteInTransition( state, siteId ) boolean语义当状态为INITIATE_TRANSFERRING、TRANSFERRING、INITIATE_REVERTING或REVERTING之一时返回true。这是判断「暂存站点正在创建或删除中」的关键 selector通常用于禁用按钮、展示 spinner 等交互反馈。getIsStagingSiteStatusComplete与getIsStagingSiteInTransition互为补集NONE/UNSET归入前者二者共同覆盖了 README 所述的完整状态序列startINITIATE_*→ in progressTRANSFERRING/REVERTING→ endCOMPLETE/REVERTED。5.4 getStagingSiteInfo —— 底层取数定义get-staging-site-info.ts签名getStagingSiteInfo( state, siteId ) Object语义直接返回state.stagingSite[siteId]当siteId为假值或该站点无记录时返回空对象{}。其余三个 selector 都依赖它做空值兜底因此组件内通常不需要直接调用。六、数据流全景与实战接入要点综合以上实现一次「创建暂存站点」的完整状态流转在客户端可归纳为UI 发起迁移 →dispatch( setStagingSiteStatus( productionSiteId, INITIATE_TRANSFERRING ) )此时客户端尚无后端 automated-transfer 数据后端返回迁移进行中的信息 → 状态更新为TRANSFERRING迁移完成 → 状态更新为COMPLETE发起删除 →INITIATE_REVERTING→ 后端确认回滚中 →REVERTING→ 删除成功 →REVERTED。回滚删除流程与之一一对称。接入新组件时建议遵循以下要点用对 ID所有 action 与 selector 传入的siteId都应是生产站点ID而非暂存站点自身 ID迁移期间暂存站点不可用这是 README 反复强调的设计原因优先用语义 selector判断「能否操作」用getIsStagingSiteStatusComplete判断「正在操作」用getIsStagingSiteInTransition仅在需要展示精确文案时才读取getStagingSiteStatus的原始值借助模块化状态规范模块遵循 Calypso 的 modularized state 约定——actions.js、selectors/index.ts均以import calypso/state/staging-site/init开头确保按需加载时 reducer 已被注册持久化安全status经 schema.js 校验后持久化非法结构会被过滤读取侧无需额外防御非法数据。七、小结stagingSitereducer 用最小的状态面一个status字段支撑了暂存站点创建/删除全生命周期的 UI 呈现其设计精髓在于面向 UI 需要而非后端全量状态、按生产站点 ID 建索引、语义化 selector 屏蔽内部细节。阅读 README 掌握状态语义表结合 constants.ts、reducer.js 与 selectors 理解实现再对照 test/reducer.js 验证持久化行为即可完整掌握该模块并在实际组件中正确使用。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso Automated Transfer 状态子树解析从 status 语义到 Redux 状态管理实战wp calypso Automated Transfer 状态子树解析从 status 语义到 Redux 状态管理实战 Automated Transfe前端CMS深入解析 wp-calypso 的 Atomic Transfer 状态管理Actions、Reducer 与状态机语义深入解析 wp calypso 的 Atomic Transfer 状态管理Actions、Reducer 与状态机语义 导读 Atomic Transfer前端CMSwp-calypso Site Sync 状态管理从 State 树到 SITE_SYNC_STATUS 状态机全解析wp calypso Site Sync 状态管理从 State 树到 SITE_SYNC_STATUS 状态机全解析 导读 Site Sync站点同步是前端CMS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考