如何使用Redux实现带操作按钮、可适配不同业务动作的通用Modal弹窗？

Redux 官方明确要求 store 中仅存储可序列化数据，函数属于不可序列化类型，因此你原有将回调函数存入Redux的实现思路不符合Redux设计规范，无法落地。目前业内针对这类UI统一、逻辑随场景动态变化的通用弹窗，主流实现方案有三种：

方案一：全局回调映射表（最适配你原有Redux方案的改造方式） #

• 核心逻辑：规避在Redux中存储函数，单独维护一个全局的回调映射对象，每个使用弹窗的场景对应唯一的scenarioId（字符串类型，可序列化）
• 实现步骤：
  1. 改造Redux的modal状态，删除btnAction1/2/3字段，新增scenarioId字段存储当前弹窗的场景唯一标识
  2. 新增全局的modalCallbackMap对象，业务组件调起弹窗时，先将当前场景的三个按钮回调函数存入该对象，key为scenarioId
  3. 根层级的弹窗组件监听Redux的modal状态变化，弹窗打开时根据scenarioId从modalCallbackMap中取出对应的回调绑定到按钮上
  4. 弹窗关闭时删除modalCallbackMap中对应scenarioId的项，避免内存泄漏
• 优点：完全保留你原有dispatch调起弹窗的使用习惯，无需在业务组件中引入弹窗组件

方案二：动作订阅模式 #

• 核心逻辑：弹窗的按钮点击统一通过Redux action分发，业务组件自行订阅匹配自身场景的按钮动作
• 实现步骤：
  1. 改造Redux的modal状态，新增scenarioId字段，无需存储回调
  2. 根弹窗组件的按钮点击时，dispatch一个modalBtnClick的action，payload携带scenarioId和按钮标识（比如save/proceed/close）
  3. 业务组件通过useEffect监听Redux中modalBtnClick动作的变化，当匹配到自身场景的scenarioId时，执行对应逻辑
• 优点：所有状态流转都走Redux，符合Redux的单向数据流规范，无额外全局变量

方案三：Context + 自定义Hook（轻量无Redux强依赖方案） #

• 核心逻辑：利用React Context可存储非序列化数据的特性，封装全局弹窗能力
• 实现步骤：
  1. 在应用根层级实现ModalProvider，内部维护弹窗的显示状态、文案、回调函数
  2. 暴露自定义Hook useModal，内部返回showModal、hideModal方法
  3. 业务组件直接调用const { showModal } = useModal()，调用时直接传入按钮回调即可调起弹窗，无需关心弹窗的渲染和状态维护
• 优点：实现简单，没有Redux的序列化限制，性能优于走Redux流转

改造后你的showModal action示例代码 #

showModal: (state, { payload }) => {
  state.modal.isOpen = true;
  state.modal.scenarioId = payload.scenarioId;
  state.modal.header = payload.header;
  state.modal.title = payload.title;
  state.modal.btnText1 = payload.btnText1;
  state.modal.btnText2 = payload.btnText2;
  state.modal.btnText3 = payload.btnText3;
}

内容的提问来源于stack exchange，提问作者Oleksandr Fomin