第 24 题：聊聊 Redux 和 Vuex 的设计思想

[whu-luojian]

知乎上看到的一篇文章：Vuex、Flux、Redux、Redux-saga、Dva、MobX（https://zhuanlan.zhihu.com/p/53599723）

[giscafer]

link for reference:

• React 的数据管理方案：redux 还是 mobx？
• You Might Not Need Redux
• How We Ditched Redux for MobX
• Angular 真的需要状态管理么？
• Understanding Redux: The World’s Easiest Guide to Beginning Redux
• 10 Tips for Better Redux Architecture
• When do I know I’m ready for Redux?
• Redux源码剖析及应用

[blockmood]

知乎上看到的一篇文章：Vuex、Flux、Redux、Redux-saga、Dva、MobX（https://zhuanlan.zhihu.com/p/53599723）

新的连接： https://zhuanlan.zhihu.com/p/53599723

[lvzhiyi]

题目是讨论两者的设计思想，我从共同点和区别方面大致说一下：

共同点

首先两者都是处理全局状态的工具库，大致实现思想都是：全局state保存状态---->dispatch(action)
------>reducer(vuex里的mutation)----> 生成newState; 整个状态为同步操作；

区别

最大的区别在于处理异步的不同，vuex里面多了一步commit操作，在action之后commit(mutation)之前处理异步，而redux里面则是通过中间件处理

[GrootWanggg]

我觉得区别不大，用法上vuex更简便而已。

[daiyunchao]

适合多人,角色转变,state改变有据可依

[a82448186]

共同点：都是为响应式编程提供的一个的可预测的状态容器。方便在复杂的应用中进行兄弟组件或者子组件里修改状态。
不同点：状态改变时 redux 通过纯函数（reduce）生成新的 state, 而vux是直接修改状态属性,最后出发相应的跟新操作

[xxy1101]

where is dalao?

[deep-fish-pixel]

• 最大的特点都采用响应式编程，在web端表现为根父子组件关系的语义化标签，完美统一了数据流、事件绑定、子模块使用方式，与html标签使用方式保持了非常好的一致性，极大提升复杂代码的可读性，总之这是一个非常有颠覆性的方式。
• 组件view主要依赖state状态的变更，极大约束了数据变更的来源，开发起来定位错误的范围更小。
• 都提供了生命周期概念，都有创建、加载、更新、卸载等阶段，在以上相关钩子函数中开发会更容易。
• 框架的内部都使用虚拟dom的实现，减少底层的操作次数，在性能上也不错。
• 因为有虚拟dom的实现，同构功能的实现也水到渠成，所以页面首次渲染也更快。

[shenxuxiang]

负责数据状态管理，类似单一数据源的概念。所有的数据都是通过 redux/vuex 下发给各个组建，组建内部无法直接修改数据，只能通过 redux/vuex 提供的方法去修改。
自己实现了一个 redux.js 。基本阐述了 redux 的流程和 API 的实现方法，比较简单。https://juejin.im/post/5e20274b6fb9a02ff32009af

[AkiDroid]

• 最大的特点都采用响应式编程，在web端表现为根父子组件关系的语义化标签，完美统一了数据流、事件绑定、子模块使用方式，与html标签使用方式保持了非常好的一致性，极大提升复杂代码的可读性，总之这是一个非常有颠覆性的方式。
• 组件view主要依赖state状态的变更，极大约束了数据变更的来源，开发起来定位错误的范围更小。
• 都提供了生命周期概念，都有创建、加载、更新、卸载等阶段，在以上相关钩子函数中开发会更容易。
• 框架的内部都使用虚拟dom的实现，减少底层的操作次数，在性能上也不错。
• 因为有虚拟dom的实现，同构功能的实现也水到渠成，所以页面首次渲染也更快。

这是react和vue的区别，不是redux和vuex的区别

[cutie6]

把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

参考： vuex 官方文档，https://vuex.vuejs.org/zh/

[CodingMeUp]

知乎上看到的一篇文章：Vuex、Flux、Redux、Redux-saga、Dva、MobX（https://zhuanlan.zhihu.com/p/53599723）

你链接多带了个 ”）“， 点这访问

[blank1u]

flux

[ZacBin9]

Immutable vs. Mutable

[mingrutough1]

都是状态管理工具。但都不是非用不可。“如果你不知道是否需要XXX，那就是不需要它”。状态管理工具适用的场景从组件角度看，有如下场景。

• 多个组件依赖于同一状态。

• 来自不同组件的行为需要变更同一状态。

上述场景如若不使用状态管理工具，不按照一定规律处理状态的读写，代码很快就会难以维护。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

redux

设计思想：

• web应用是一个状态机，状态与视图一一对应。

• 所有的状态都保存在一个对象里面。
  http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

vuex:

vuex是以个专为vue.js开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态已一种可预测的方式发生变化。
对于复杂的应用，vuex把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，组件树构成了一个巨大的视图，不管在树的哪个位置，任何组件都能够轻松读写状态。且通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这就是vuex背后的基本思想，借鉴了flux、redux等。于其他模式不同的是，vuex是专门为vue.js设计的状态管理库，以利用vue.js的细粒度数据响应机制来进行高效的状态更新。

[yyISACoder]

题目是讨论两者的设计思想，我从共同点和区别方面大致说一下：

共同点

首先两者都是处理全局状态的工具库，大致实现思想都是：全局state保存状态---->dispatch(action) ------>reducer(vuex里的mutation)----> 生成newState; 整个状态为同步操作；

区别

最大的区别在于处理异步的不同，vuex里面多了一步commit操作，在action之后commit(mutation)之前处理异步，而redux里面则是通过中间件处理

最大区别应该是redux是遵循immutable的方式进行state的更改，而vuex是以mutable的方式去更改state