千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:合肥千锋IT培训  >  技术干货  >  Redux解决了什么问题?是如何工作的?

Redux解决了什么问题?是如何工作的?

来源:千锋教育
发布人:qyf
时间: 2023-02-14 17:22:46

Redux解决了什么问题

  React框架这样的纯视图的框架对组件通信、状态共享等方面没有太好的解决方案,只能利用状态提升、context之类的技术方案来解决, 但是当组件结构、数据流向都比较复杂的时候,React本身的Api解决这样的问题就有些吃力。

  此时就可以使用Flux、Redux这样的架构方式来解决问题。

  我们之前的项目就在使用Redux,后来又有了rtk,让redux在react组件中的使用更加方便,在一些小型的项目, 或者一些小模块中, 利用useReducerHook来进行state与dispatch的构建,也能快速优雅的解决问题。

  之前的原生Redux中,真实项目开发中,往往需要搭配redux-thunk来进行异步action处理,以及react-redux来进行组件与store的连接, 如果不使用react-redux的话,会比较繁琐。

  redux的结构分为store、Views、Actions、Reducer。

  Store中存储的状态在视图中可以通过getState来获取,也可以通过subscribe方法进行监听,当视图产生UI操作的时候, 可以调用actions的方法来生成action后,利用dispatch方法进行派发,此时reducer就会被调用,并且接收到当前的状态与action对象, 经过计算出,返回新状态,Store就会进行状态的更新。

  利用react-redux后, 组件可以通过connect搭配mapStateToProps及mapDispatchToProps参数来获取store中的状态及actions中的方法。

  使用RTK之后,创建reducer更近方便,利用useSelector和useDispatch可以更快更高效取用状态及派发action。

  对于一个小的场景,比如之前我做的注册模块有三个步骤,每个步骤都需要用到第一步用户填写的手机号等信息,这样就形成了几个小组件间的状态共享, 如果使用父组件状态提升会导致数据流向不清晰,也犯不上使用redux-store进行存储,于是就是使用useReducer快速的创建了一个小的store,内部集成了state与dispatch,搭配Context,也能很高效的解决问题。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

unity快捷键大全

2023-08-28

unity射线检测多个物体

2023-08-28

unity富文本字体大小

2023-08-28

最新文章NEW

unity性能优化指标

2023-08-28

unity开发常用框架

2023-08-28

unity玻璃材质球

2023-08-28

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>