聊聊 Redux 和 Vuex 的设计思想

372 阅读3分钟

不管是 Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要。

什么是共享状态?

比如一个组件需要使用另一个组件的状态,或者一个组件需要改变另一个组件的状态,都是共享状态。

父子组件之间,兄弟组件之间共享状态,往往需要写很多没有必要的代码,比如把状态提升到父组件里,或者给兄弟组件写一个父组件,听听就觉得挺啰嗦。 如果不对状态进行有效的管理,状态在什么时候,由于什么原因,如何变化就会不受控制,就很难跟踪和测试了。如果没有经历过这方面的困扰,可以简单理解为会搞得很乱就对了。

在软件开发里,有些通用的思想,比如隔离变化约定优于配置等。

隔离变化就是说做好抽象,把一些容易变化的地方找到共性,隔离出来,不要去影响其他的代码。

约定优于配置就是很多东西我们不一定要写一大堆的配置,比如我们几个人约定,view 文件夹里只能放视图,不能放过滤器,过滤器必须放到filter 文件夹里,那这就是一种约定,约定好之后,我们就不用写一大堆配置文件了,我们要找所有的视图,直接从 view 文件夹里找就行。

根据这些思想,对于状态管理的解决思路就是:

把组件之间需要共享的状态抽取出来,遵循特定的约定,统一来管理,让状态的变化可以预测

Redux 和 Vuex 都是常用的状态管理库,它们在设计上有许多相似之处,都是基于 Flux 架构模式的一种实现。以下是它们的设计思想:

  • 单一数据源

Redux 和 Vuex 的最大特点就是将应用程序的所有状态集中到一个单一的数据源中进行管理,这个数据源被称为 store。这样可以方便地跟踪和调试应用程序的状态变化,避免了多个组件之间的状态同步问题。

  • 状态只读

为了保证状态的可控性和可预测性,Redux 和 Vuex 都采用了状态只读(read-only)的策略。这意味着状态只能通过纯函数生成新的状态,而不能直接修改原始状态对象。这种方式确保了状态的不可变性,防止状态被误修改或意外更改而导致的副作用。

  • 组件解耦

Redux 和 Vuex 的设计思想都是为了解决组件之间的通信问题。通过使用全局的 store 对象来管理应用程序的状态,任何组件都可以从中读取所需的状态信息,这种方式可以减少组件之间的耦合度,提高代码的可维护性和可扩展性。

  • 动态更新

Redux 和 Vuex 都支持动态更新应用程序的状态。当状态发生变化时,会触发一个事件,通知所有相关组件进行更新。这个过程是自动完成的,无需手动干预。

  • 中心化管理

Redux 和 Vuex 都采用了中心化管理的架构模式。在 Redux 中,状态的修改只能通过 dispatch 一个 action 来实现;在 Vuex 中,状态的修改只能通过提交一个 mutation 来实现。这种方式可以确保状态变更的可控性和可预测性。

总结:

Redux 和 Vuex 的设计思想都是为了让应用程序的状态变得更加可控、可预测和易于维护通过使用单一数据源、状态只读、组件解耦、动态更新和中心化管理等技术手段,这两个库可以实现复杂应用程序的状态管理,并提高代码的可重用性和可扩展性。