C10

reducer 提交机

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

用 useReducer 实现提交状态机：editing/submitting/success/failed 四个状态，非法动作不能产生矛盾状态。保存函数通过 prop 注入：App({ submitApi })，submitApi 接收草稿字符串返回 Promise<{ ok: boolean }>，默认实现约 30ms 后返回 { ok: true }。页面有「计划内容」输入框、「提交」按钮与「重置」按钮。

要求

输入内容后显示「状态：编辑中」与「内容：xxx」；提交成功后显示「状态：已提交」
注入返回 { ok: false } 的 submitApi：提交后显示「状态：提交失败」，内容仍在；再次提交可变为「状态：已提交」
提交进行中按钮显示「提交中…」且处于禁用状态；重复点击只触发一次 submitApi
「重置」按钮回到「状态：编辑中」并清空内容

R18 useReducer 与状态转移

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

reducer 提交机

Command Palette