Redux的设计思想
什么是Redux ?
Redux是一个为JavaScript应用设计的,可预测的状态容器。
由此可见,Redux的主要作用是管理程序状态的。只要你的项目中使用到了状态,并且状态十分复杂,那么你就可以使用Redux管理你的项目状态
为什么要用Redux管理状态
React 是使用 state 来管理界面的展示,state 与 View 一一对应,然而,随着应用复杂度的增加,你会经历以下心路历程:
刚开始的时候,只需要做一些简单的展示,只要在顶层的组件获取数据后再以 props 的形式传给子组件就好了:
随着功能的不断丰富,组件越来越多,state也越来越复杂,直到有一天你发现,修改和共享某个state变得极其艰难:
共享的state需要放在最顶层维护,然后一层一层地往下传递修改state的方法和展现的数据。这时你会发现,很多数据中间层的组件根本不需要用到,但由于子组件需要用,不得不经过这些中间层组件的传递。更令人头疼的事,当state变化的时候,你根本分不清楚是由哪个组件触发的。
如果这时候有一个容器专门来统一管理这些状态不用一层层的传递props是不是就好了,所以redux就是来解决这个问题的!!
应用的state统一放在store里面维护,当需要修改state的时候,dispatch一个action给reducer,reducer算出新的state后,再将state发布给事先订阅的组件。
所有对状态的改变都需要dispatch一个action,通过追踪action,就能得出state的变化过程。整个数据流都是单向的,可检测的,可预测的。 当然,另一个额外的好处是不再需要一层一层的传递props了,因为Redux内置了一个发布订阅模块。
Redux使用场景
Redux虽好,但并不适用于所有项目。使用Redux需要创建很多模版代码,会让 state 的更新变得非常繁琐,谁用谁知道
当遇到以下情况,Redux是你最好的选择:
同一个 state 需要在多个 Component 中共享
需要操作一些全局性的常驻 Component,比如 Notifications,Tooltips 等
太多 props 需要在组件树中传递,其中大部分只是为了透传给子组件
业务太复杂导致 Component 文件太大,可以考虑将业务逻辑拆出来放到 Reducer 中
使用Redux带来的好处
不用父子组件间一层一层的去传递props,各个组件间通过store来进行通信
将 UI 和业务逻辑分离,使业务逻辑可以在多个地方重用