redux
1 | reducer(state, action) -> newState |
flux vs redux
1.flux是一种架构设计思想，用来在大型项目中实现数据的单向流动，而redux是flux这种设计思想下的一种具体实现。（也有人不同意这种意见）
2.flux里的概念：store，action，dispatcher；redux的概念：store，action，reducer。redux中不额外提供专门的派发器dispatcher，而是通过store.dispatch实现
3.flux里根据功能不同，拆分成多个store；redux全局只维护一个store，其包含整个应用的state。
4.redux里的store只有一个，包含了整个应用的state，但是可以通过拆分多个reducer来分别管理对应的state。
action用来描述改变的行为。action是一个简单对象，包含需要执行的操作类型（type指定）和一些其他负载（payload）。
reducer(state，action)=> newState。改变由reducers 来执行，reducers 是没有副作用的纯函数，将先前的state和一个action作为参数。它们会返回由应用action产生的新的state。
reducer有多个，每个reducer维护state树的一支，redux用combineReducers()方法将多个reducer合并起来。
补充：
在hybrid架构中，每次打开一个页面，都是新建一个webview。因此spa + redux模式在这种场景下并不适用，因为redux只有一个全局store，维护了多个子页面的store, 而在一个webview中，非本页面的store都没被利用，无疑是一种浪费
mobx vs redux
核心理念：数据驱动，只要状态发生变化，其他用到状态的地方都会自动变。
mobx看起来更像是把vue的数据绑定机制单拎出来，再做增强，同时使用es7的decorator语法让API更简单
mobx的工作方式：1
2
3
4 change Derivations
action --------> state -------------> computed
|
-------------> reaction
1.redux的数据流动很清晰，有时间回溯的能力；而mobx没有时间回溯的能力，但是mobx能精确知道数据的变化，粒度控制较细，所以可以减少diff的成本，一定程度上view更新会比redux更快
2.redux要求store应该是一个纯对象，且全局唯一；而mobx允许有多个store，store可以直接修改，且不要求state的数据结构和类型
3.redux中的action要求是一个简单对象，用以描述发生了什么改变；而mobx的action是一个函数，用来修改状态
4.redux里reducer(state, action) -> newState； mobx里彻底抛弃了reducer，原本reducer要做的工作全在action里完成
5.redux通过引入中间件来处理副作用；mobx没有中间件，副作用处理比较自由。
6.redux有自己的开发规范，因此有很多模板代码，方便后期维护，适合大项目；而mobx相当灵活，没有最佳实践，容易造成维护困难，适合小项目。
flux，redux，mobx都和具体的前端框架无关。
vuex
vuex主要有4个概念：state, getters, action, mutation。工作流如下：1
2 commit mutate render
action --------> mutation --------> state --------> view
同步操作： store.commit(‘add’) commit直接触发mutation，完成同步任务
异步操作： store.dispatch(‘add’, xxargs) dispatch触发某个action来完成异步任务，action里可以触发mutation
vuex原理：vuex中的store就是一个隐藏的没有template的vue组件，store.state就是这个组件的data，在组件beforeCreate钩子里混入store，以便组件内可以通过this.$store访问到state
vuex如何确保只能通过commit提交mutation？
内部有一个this._comitting的标记位，只有commit操作才能修改它。
vuex全局也只有一个store，但是引入了module的概念可以对state做模块化，只要最后组合在一起就可以了。通过module把全局store拆分开，每个module有自己的state，getters，action, mutation。
mobx vs vuex
vuex从设计上区分了异步任务和同步任务，分别放在对应的action和mutation里实现；而mobx并不区分这个，同步和异步都在action里完成
vuex里的getters就是mobx里的computed
redux vs vuex
1.vuex不要求每次都新搞一个state，可以直接修改state，view会自动响应式更新。而redux推荐使用immutable数据，每次都生成一个新的state引用。
2.相比redux的中间件，vuex从设计上通过mutation和action来区分同步和异步操作，简单很多。