react,useReducer结合useContext跨组件状态管理终极版
发布于 作者:苏南大叔 来源:程序如此灵动~

react
项目,其实就是调用各种函数修改各种数据。那么,useReducer
是react
官方推荐的useState
的升级版,可以用于集中管理数据和修改数据的函数,而useContext
又具有跨组件传递数据的能力。所以,本文讨论的话题依然是:useReducer
结合useContext
跨组件状态管理。本文为了解决层层传值的问题,抛弃props
传值的方式,将数据包裹进context
。

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文继续描述react
项目的useReducer
和useContext
的跨组件状态管理的终极版。测试环境:create-react-app@5.0.1
,node@16.14.2
,react@18.2.0
,react-dom@18.2.0
。
基本内容
为了更好的理解本文的内容,推荐大家阅读一下本文的前置内容:
本文的代码和上一篇文章中的代码基本雷同,有区别的地方就是改进之处。主要的思路就是,把useReducer
的的结果state
和dispatch
再进行从新进行组合,然后传入prodiver
的value
中。在各个被嵌套的组件中,可以通过useContext
获得上述state
和dispatch
的组合。

定义context
、reducer
、prodiver
这里对做context
和reducer
基本定义,注意这里给context
做了一个默认值,用于没有被prodiver
包裹的情况(虽然可能性为零)。
核心代码:

定义内部嵌套组件
核心代码是:

相关文章
- https://newsn.net/say/create-react-app.html
- https://newsn.net/say/react-useref.html
- https://newsn.net/say/react-usestate.html
- https://newsn.net/say/react-usememo.html
- https://newsn.net/say/react-useeffect.html
结束语
在本文中,通过组合useReducer
的结果到context
,实现了在各个子组件中不依靠props
传值的效果。更多react
经验文章,请点击苏南大叔的博客文章:


