hooks的reducer应该怎样写合理?

小木
  • 295

code1:

const reducer=(state,action)=>{
   ....
   case "ADD":
   return {...state,count:state.count+action.payload.count}
   ...
}

//派发
dispatch({type:"ADD",payload:{count:10}})

code2:


const reducer=(state,action)=>{
   return {...state,...action.payload}
}

//派发
dispatch({type:"ADD",payload:{count:oldCount+10}})

目前浏览了很多代码,都是第一种写法较多,但是状态比较多可能有很多case判断,reducer是个纯函数,作用就是返回新的state,所以直接使用第二种采用copy方式免去case判断是否可行,不管维护状态多少,reducer只需几行代码,看到过文章介绍叫no-reducer模式。

回复
阅读 523
1 个回答

useReducer就是一些操作的封装,如果这些操作是很简单的,就比如 oldCount+10
那么可能不用封装这种操作,直接用useState也是差不多的效果
如果你的操作稍微复杂起来像这种,你不想每次都手动计算slideIndex,
https://codepen.io/team/keyfr...
那么就应该把他封装成useReducer

像这种更复杂的各个state之间不同的action type之间的切换还涉及到了复杂的转换,那么你可能还得用上状态机 https://codepen.io/team/keyfr...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏