当前位置: 首页 > 后端技术 > Node.js

Reduce样板代码在redux中关于reduce重构的应用

时间:2023-04-03 19:44:33 Node.js

原始代码//节省了内容functionupdateObject(oldObject,newValues){}functionupdateItemInArray(array,itemId,updateItemCallback){}functionsetVisibilityFilter(visibilityState,action){//从技术上将,我们甚至不关心之前的状态returnaction.filter;}functionvisibilityReducer(visibilityState='SHOW_ALL',action){switch(action.type){case'SET_VISIBILITY_FILTER':returnsetVisibilityFilter(visibilityState,action);默认值:返回visibilityState;}};functionaddTodo(todosState,action){constnewTodos=todosState.concat({id:action.id,text:action.text,completed:false});returnnewTodos;}functiontoggleTodo(todosState,action){constnewTodos=updateItemInArray(todosState,action.id,todo=>{returnupdateObject(todo,{completed:!todo.completed});});}返回newTodos;}functioneditTodo(todosState,action){constnewTodos=updateItemInArray(todosState,action.id,todo=>{返回更新对象(待办事项,{文本:action.text});});返回newTodos;}functiontodosReducer(todosState=[],action){switch(action.type){case'ADD_TODO':returnaddTodo(todosState,action);case'TOGGLE_TODO':returntoggleTodo(todosState,action);case'EDIT_TODO':returneditTodo(todosState,action);默认值:返回todosState;}}functionappReducer(state=initialState,action){return{todos:todosReducer(state.todos,action),visibilityFilter:visibilityReducer(state.visibilityFilter,action)};}使用样板代码后,switch语句不再需要。有些代码洁癖讨厌if和switch的条件判断。可以配置//省略内容hasOwnProperty(action.type)){returnhandlers[action.type](state,action)}else{returnstate}}//省了内容functionsetVisibilityFilter(visibilityState,action){}constvisibilityReducer=createReducer('SHOW_ALL',{'SET_VISIBILITY_FILTER':setVisibilityFilter});//省了内容functionaddTodo(todosState,action){}functiontoggleTodo(todosState,action){}functioneditTodo(todosState,action){}consttodosReducer=createReducer([],{'ADD_TODO':addTodo,'TOGGLE_TODO':toggleTodo,'EDIT_TODO':editTodo});functionappReducer(state=initialState,action){return{todos:todosReducer(state.todos,action),visibilityFilter:visibilityReducer(state.visibilityFilter,action)};}