如何将每个state对象中的所有hidden属性值统一修改为false?
Redux逻辑放置方案建议
核心原则:按Redux职责边界确定逻辑位置
- action的唯一职责是描述发生的事件,仅承载事件相关的元数据,不包含状态计算逻辑
- reducer的职责是根据接收到的action事件,完成状态的计算与更新
针对你当前场景的落地建议
你给出的状态结构是典型的分阶段任务进度管理场景,所有进度计算、状态联动(比如上一阶段完成后自动解锁下一阶段)的逻辑都应该放在reducer中实现,优势如下:
- 逻辑收敛:所有状态更新规则都统一在reducer中维护,不会散落在多个action creator中,后续修改规则只需调整一处
- 代码更简洁:你只需发出纯描述性的action,不需要在action中调用
getState获取当前状态、提前计算完字段再传给reducer,避免冗余代码 - 符合Redux设计规范:可以正常使用Redux的时间旅行、状态回溯等调试能力,不会因为action中包含计算逻辑导致调试异常
举个实际代码示例,假设你要实现「完成指定模块下的任务后更新进度,全完成自动解锁下一阶段」的需求:
首先定义极简的action:
// action 仅描述事件,不做任何计算 const taskCompleted = (moduleKey, taskId) => ({ type: 'TASK_COMPLETED', payload: { moduleKey, taskId } })
对应的reducer逻辑:
const taskReducer = (state = initialState, action) => { switch (action.type) { case 'TASK_COMPLETED': { const { moduleKey, taskId } = action.payload const currentModule = state[moduleKey] // 已完成过该任务直接返回原状态 if (currentModule.completedIds.includes(taskId)) return state // 计算当前模块的新进度 const newCompletedIds = [...currentModule.completedIds, taskId] const newCompletedCount = newCompletedIds.length const isModuleDone = newCompletedCount === currentModule.totalTasks // 处理下一个模块的解锁逻辑 const moduleOrder = ['unlockWebsite', 'prepareHome', 'findingBuyers', 'negotiateOffers', 'closeHome'] const currentModuleIndex = moduleOrder.indexOf(moduleKey) const updates = { [moduleKey]: { ...currentModule, completedIds: newCompletedIds, completedCount: newCompletedCount, state: isModuleDone ? 'completed' : currentModule.state } } // 当前模块完成且有下一模块时解锁 if (isModuleDone && currentModuleIndex < moduleOrder.length - 1) { const nextModuleKey = moduleOrder[currentModuleIndex + 1] updates[nextModuleKey] = { ...state[nextModuleKey], hidden: false, state: 'in_progress' } } return { ...state, ...updates } } default: return state } }
这种实现方式没有任何hack逻辑,所有规则都清晰可维护,比把计算逻辑放在action里简洁很多。
内容的提问来源于stack exchange,提问作者Nick Massie
相关产品推荐
相关产品推荐

