Skip to content

第 26 题:redux-saga 和 mobx 的比较 #32

@lgwebdream

Description

@lgwebdream
Owner

欢迎在下方发表您的优质见解

Activity

Genzhen

Genzhen commented on Jun 23, 2020

@Genzhen
Collaborator

1)状态管理

  • redux-sage 是 redux 的一个异步处理的中间件。
  • mobx 是数据管理库,和 redux 一样。

2)设计思想

  • redux-sage 属于 flux 体系, 函数式编程思想。
  • mobx 不属于 flux 体系,面向对象编程和响应式编程。

3)主要特点

  • redux-sage 因为是中间件,更关注异步处理的,通过 Generator 函数来将异步变为同步,使代码可读性高,结构清晰。action 也不是 action creator 而是 pure action,
  • 在 Generator 函数中通过 call 或者 put 方法直接声明式调用,并自带一些方法,如 takeEvery,takeLast,race等,控制多个异步操作,让多个异步更简单。
  • mobx 是更简单更方便更灵活的处理数据。 Store 是包含了 state 和 action。state 包装成一个可被观察的对象, action 可以直接修改 state,之后通过 Computed values 将依赖 state 的计算属性更新 ,之后触发 Reactions 响应依赖 state 的变更,输出相应的副作用 ,但不生成新的 state。

4)数据可变性

  • redux-sage 强调 state 不可变,不能直接操作 state,通过 action 和 reducer 在原来的 state 的基础上返回一个新的 state 达到改变 state 的目的。
  • mobx 直接在方法中更改 state,同时所有使用的 state 都发生变化,不生成新的 state。

5)写法难易度

  • redux-sage 比 redux 在 action 和 reducer 上要简单一些。需要用 dispatch 触发 state 的改变,需要 mapStateToProps 订阅 state。
  • mobx 在非严格模式下不用 action 和 reducer,在严格模式下需要在 action 中修改 state,并且自动触发相关依赖的更新。

6)使用场景

  • redux-sage 很好的解决了 redux 关于异步处理时的复杂度和代码冗余的问题,数据流向比较好追踪。但是 redux 的学习成本比 较高,代码比较冗余,不是特别需要状态管理,最好用别
    的方式代替。
  • mobx 学习成本低,能快速上手,代码比较简洁。但是可能因为代码编写的原因和数据更新时相对黑盒,导致数据流向不利于追踪。
Genzhen

Genzhen commented on Jun 23, 2020

@Genzhen
Collaborator

saga是redux处理异步的一种方式。saga需要一个全局监听器(watcher saga),用于监听组件发出的action,将监听到的action转发给对应的接收器(worker saga),再由接收器执行具体任务,任务执行完后,再发出另一个action交由reducer修改state。

mobx与redux的功能相似,mobx的实现思想和Vue几乎一样,所以其优点跟Vue也差不多:通过监听数据(对象、数组)的属性变化,可以通过直接在数据上更改就能触发UI的渲染,从而做到MVVM、响应式、上手成本低、开发效率高

  • redux将数据保存在单一的store中;mobx将数据保存在分散的多个store中
  • redux使用plain object保存数据,需要手动处理变化后的操作;mobx使用observable保存数据,数据变化后自动处理响应的操作
  • redux使用不可变状态,这意味着状态是只读的,不能直接去修改它,而是应该返回一个新的状态,同时使用纯函数;mobx中的状态是可变的,可以直接对其进行修改
  • mobx相对来说比较简单,在其中有很多的抽象,mobx更多的使用面向对象的编程思维;redux会比较复杂,因为其中的函数式编程思想掌握起来不是那么容易,同时需要借助一系列的中间件来处理异步和副作用
  • mobx中有更多的抽象和封装,调试会比较困难,同时结果也难以预测;而redux提供能够进行时间回溯的开发工具,同时其纯函数以及更少的抽象,让调试变得更加的容易;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @lgwebdream@Genzhen

        Issue actions

          第 26 题:redux-saga 和 mobx 的比较 · Issue #32 · lgwebdream/FE-Interview