全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货  >  详情

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

来源:千锋教育
发布人:qyf
2023-02-14

推荐

在线提问>>

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,也能很高效的解决问题。

相关文章

unity快捷键大全

unity射线检测多个物体

unity图集合并成图片

unity富文本字体大小

unity哪个版本免费

开班信息 更多>>

课程名称
全部学科
咨询

HTML5大前端

Java分布式开发

Python数据分析

Linux运维+云计算

全栈软件测试

大数据+数据智能

智能物联网+嵌入式

网络安全

全链路UI/UE设计

Unity游戏开发

新媒体短视频直播电商

影视剪辑包装

游戏原画

    在线咨询 免费试学 教程领取