为什么在Redux-Saga上使用Redux-Observable？

I have used Redux-Saga. Code written with it is easy to reason so far, except JS generator function is messing up my head from time to time. From my understanding, Redux-Observable can achieve the similar job that handles side effects but without using generator function.

我用过Redux-Saga。到目前为止，使用它编写的代码很容易理解，除了JS生成器功能不时弄乱我的脑袋。根据我的理解，Redux-Observable可以实现处理副作用但不使用生成器功能的类似工作。

However, docs from Redux-Observable does not provide many opinions of why it is superior against Redux-Saga. I would want to know whether not using generator function is the only benefit of using Redux-Observable. And what could be the downsides, gotcha or compromises from using Redux-Observable instead of Redux-Saga? Thanks in advance.

然而，来自Redux-Observable的文档并没有提供很多关于它为什么优于Redux-Saga的观点。我想知道是否使用生成器函数是使用Redux-Observable的唯一好处。使用Redux-Observable而不是Redux-Saga会有什么缺点，陷阱或妥协？提前致谢。

5 个解决方案

#1

Disclaimer: I am one of the authors of redux-observable so it's hard for me to be 100% impartial.

免责声明：我是redux-observable的作者之一，所以我很难100％公正。

We don't currently provide any reason redux-observable is better than redux-saga because...it's not. ????

我们目前没有提供任何理由，redux-observable比redux-saga更好，因为......它不是。 ????

tl;dr there are pros and cons to both. Many will find one more intuitive than the other, but both are complex to learn in different ways if you don't know RxJS (redux-observable) or generators/"effects as data" (redux-saga).

They solve the same problem in extremely similar ways, but have some fundamental differences that only become truly apparent once you use them enough.

他们以非常相似的方式解决同样的问题，但有一些基本的差异，只有在你足够使用它们后才会变得非常明显。

redux-observable defers nearly everything to idiomatic RxJS. So if you have RxJS knowledge (or gain it), learning and using redux-observable is super super natural. That also means that this knowledge is transferable to things other than redux. If you decide to switch to MobX, if you decide to switch to Angular2, if you decide to switch to some future hotness X, chances are extremely good that RxJS can help you. This is because RxJS is a generic async library, and in many ways is like a programming language in itself—the whole "Reactive Programming" paradigm. RxJS existed since 2012 and started as a port of Rx.NET (there are "ports" in nearly every major language, it's that useful).

redux-observable几乎将所有东西都推迟到惯用的RxJS。因此，如果你有RxJS知识（或获得它），学习和使用redux-observable是超级自然的。这也意味着这种知识可以转移到除redux之外的其他事物。如果您决定切换到MobX，如果您决定切换到Angular2，如果您决定切换到未来的热点X，那么RxJS可以帮助您的机会非常好。这是因为RxJS是一个通用的异步库，在很多方面就像编程语言本身 - 整个“反应式编程”范例。 RxJS自2012年起就存在并开始作为Rx.NET的一个端口（几乎所有主要语言都有“端口”，它非常有用）。

redux-saga provides its time-based operators itself, so while the knowledge you acquire about generators and handling side effects in this process-manager style is transferable, the actual operators and usage is not used in any other major library. So that's a little unfortunate, but certainly shouldn't be a deal-breaker by itself.

redux-saga本身提供基于时间的运算符，因此虽然您获得的有关生成器和处理副作用的知识在此流程管理器样式中是可转移的，但实际的运算符和用法并未在任何其他主要库中使用。所以这有点不幸，但当然不应该是一个破坏者。

It also uses "effects as data" (described here), which might be hard to wrap your head around at first, but it means that your redux-saga code doesn't actually perform the side effects itself. Instead, the helper functions you use create objects that are like tasks that represent the intent to do the side effect and then the internal library performs it for you. This makes testing extremely easy, without the need for mocking and is very attractive to some people. However, I personally have found it means your unit tests reimplement much of your saga's logic--making those tests not very useful IMO (this opinion isn't shared by everyone)

它还使用“效果作为数据”（这里描述），这可能很难首先解决，但这意味着你的redux-saga代码实际上并没有执行副作用。相反，您使用的辅助函数创建的对象类似于表示执行副作用的意图的任务，然后内部库为您执行。这使得测试非常简单，无需嘲笑，对某些人来说非常有吸引力。但是，我个人已经发现这意味着你的单元测试重新实现了你的saga的大部分逻辑 - 使这些测试不是非常有用的IMO（这个观点不是每个人共享的）

People often ask why we don't do something like that with redux-observable: to me it's fundamentally incompatible with normal idiomatic Rx. In Rx, we use operators like .debounceTime() that encapsulates the logic required to debounce, but that means if we wanted to make a version of it that doesn't actually perform the debouncing and instead emits task objects with the intent, you've now lost the power of Rx because you can't just chain operators anymore because they'd be operating on that task object, not the real result of the operation. This is really hard to explain elegantly. It again requires heavy understanding of Rx to understand the incompatibility of approaches. If you really want something like that, check out redux-cycles which uses cycle.js and mostly has those goals. I find it requires too much ceremony for my tastes, but I encourage you to give it a spin if it interests you.

人们经常会问为什么我们不会用redux-observable做那样的事情：对我而言，它与普通惯用的Rx根本不相容。在Rx中，我们使用像.debounceTime（）这样的运算符来封装去抖动所需的逻辑，但是这意味着如果我们想要制作一个实际上不执行去抖动的版本，而是用意图发出任务对象，那么'现在已经失去了Rx的力量，因为你不能再仅仅连接操作员，因为他们将在该任务对象上操作，而不是操作的真实结果。这很难优雅地解释。它还需要对Rx有深入的了解才能理解方法的不兼容性。如果你真的想要这样的东西，请查看使用cycle.js的redux-cycles，并且大多数都有这些目标。我发现它需要太多的仪式来满足我的口味，但我鼓励你如果感兴趣的话就给它一个旋转。

As ThorbenA mentioned, I don't shy away from admitting that redux-saga is currently (10/13/16) the clear leader in complex side effect management for redux. It was started earlier and has a more robust community. So there's a lot of attraction to using the de facto standard over the new kid on the block. I think it's safe to say if you use either without prior knowledge, you're in for some confusion. We both use fairly advanced concepts that once you "get", makes complex side effect management far easier, but until then many stumble.

正如ThorbenA所提到的，我不会回避承认redux-saga目前（10/13/16）是redux复杂副作用管理的明显领导者。它起步较早，拥有更强大的社区。所以使用事实上的标准对于新的孩子来说有很大的吸引力。我认为可以肯定地说，如果你在没有事先知识的情况下使用它们，那么你会感到困惑。我们都使用相当高级的概念，一旦你“获得”，使复杂的副作用管理变得容易，但在此之前许多人绊倒了。

The most important advice I can give is not to bring in either of these libraries before you need them. If you're only making simple ajax calls, you probably don't need them. redux-thunk is stupid simple to learn and provides enough for the basics--but the more complex the async the harder (or even impossible) it becomes for redux-thunk. But for redux-observable/saga in many ways it shines the most the more complex the async is. There's also a lot of merit in using redux-thunk with one of the others (redux-observable/saga) in the same project! redux-thunk for your common simple stuff and then only using redux-observable/saga for complex stuff. That's a great way to remain productive, so you're not fighting redux-observable/saga for things that would be trivial with redux-thunk.

我能给出的最重要的建议是在你需要它们之前不要引入这些库中的任何一个。如果您只是进行简单的ajax调用，则可能不需要它们。 redux-thunk简单易学，为基础知识提供了足够的东西 - 但异步越复杂，对于redux-thunk来说就越难（甚至不可能）。但是对于redux-observable / saga来说，它在很多方面都闪耀得越多，异步就越复杂。在同一个项目中使用redux-thunk和其他一个（redux-observable / saga）也有很多优点！ redux-thunk为你常见的简单东西，然后只使用redux-observable / saga来复杂的东西。这是保持工作效率的好方法，因此你不会为了使用redux-thunk这些微不足道的事情而与redux-observable / saga作斗争。

#2

I think there are things that you need to take in consideration.

我认为有些事情你需要考虑。

1. Complexity
2. 复杂
3. Coding Style
4. 编码风格
5. Learning Curve
6. 学习曲线
7. Testability
8. 可测性

Lets say we want to fetch user from API

让我们说我们想从API中获取用户

// Redux-Saga

import axios from 'axios' 

function* watchSaga(){
  yield takeEvery('fetch_user', fetchUser) // waiting for action (fetch_user)
}

function* fetchUser(action){
    try {
        yield put({type:'fetch_user_ing'})
        const response = yield call(axios.get,'/api/users/1')
        yield put({type:'fetch_user_done',user:response.data})
  } catch (error) {
        yield put({type:'fetch_user_error',error})
  }
}

// Redux-Observable
import axios from 'axios'

const fetchUserEpic = action$ => 
    action$
        .ofType('fetch_user')
        .flatMap(()=>
          Observable.from(axios.get('/api/users/1')) // or use Observable.ajax
            .map(response=>({type:'fetch_user_done', user:response.data}))
            .catch(error => Observable.of({type:'fetch_user_error',error}))
            .startWith({type:'fetch_user_ing'})
        )

Also, I have written this article in order compare the differences between Redux-saga and Redux-Observable in depth. Check out this link here or presentation.

另外，我写这篇文章是为了深入比较Redux-saga和Redux-Observable之间的差异。在这里查看此链接或演示文稿。

#3

I use Redux-Observable over Redux-Saga because prefer to work with observables over generators. I use it with RXJS, which is a powerful library for working with streams of data. Think of it like lodash for async. In terms of any downsides, gotcha and compromises in choosing one over the other, take a look at this answer from Jay Phelps:

我在Redux-Saga上使用Redux-Observable，因为我更喜欢使用可观察的生成器而不是生成器。我将它与RXJS一起使用，RXJS是一个用于处理数据流的强大库。把它想象为lodash for async。在任何缺点方面，在选择其中一个方面存在问题和妥协，请看看Jay Phelps的答案：

redux-saga as a project has existed longer than redux-observable so that's certainly one major selling point. You'll find more documentation, examples, and likely are have a better community to get support from.

redux-saga作为一个项目已存在比redux-observable更长的时间，因此这当然是一个主要的卖点。您将找到更多文档，示例，并且可能有更好的社区来获得支持。

The counter being that the operators and APIs you learn in redux-saga aren't nearly as transferable as learning RxJS, which is used all over the place. redux-observable is super super super simple internally, it's really just giving you a natural way for you to use RxJS. So if you know RxJS (or want to), it's an extremely natural fit.

计数器是你在redux-saga中学到的运算符和API几乎不像学习RxJS那样可转移，RxJS在各地都有使用。 redux-observable是超级超级简单的内部，它真的只是给你一个自然的方式来使用RxJS。因此，如果您了解RxJS（或想要），那么它非常自然。

My advice at the moment for most people is that if you have to ask which one you should use, you probably should choose redux-saga.

我对大多数人的建议是，如果你不得不问你应该使用哪一个，你可能应该选择redux-saga。

#4

I value the transferability across languages and runtimes that Rx has. Even if your app won't change languages, your career may. Get the best leverage you can on your learning, however you size that up for yourself. It's such a great gateway to .Net LINQ in particular.

我重视Rx具有的语言和运行时的可转移性。即使您的应用程序不会更改语言，您的职业生涯也可能。在您的学习中获得最佳的杠杆作用，无论您为自己规模如此。它特别适合.Net LINQ。

#5

Redux-Observable is an amazing library, we use it in production for 1.5 years without any issues so far, it's perfectly testable and can be easily integrated with any framework. We are having extremely overloaded parallel socket channels and the only thing which is saving us from freezes is Redux-Observable

Redux-Observable是一个了不起的图书馆，我们在生产中使用它已经有1.5年没有任何问题，它完全可以测试，可以很容易地与任何框架集成。我们拥有极度超载的并行套接字通道，唯一可以让我们免于冻结的是Redux-Observable

I have 3 points I'd like to mention here.

我想在这里提到3点。

1. Complexity and learning curve

1.复杂性和学习曲线

Redux-saga easily beats redux-observable here. If you need just a simple request to get authorization done and you don't want to use redux-thunk for some reasons, you should consider using redux-saga, it's just easier to understand.

Redux-saga在这里轻松击败redux-observable。如果您只需要一个简单的请求来完成授权而且您不想因为某些原因而使用redux-thunk，那么您应该考虑使用redux-saga，它更容易理解。

If you don't have prior knowledge of Observable it will be a pain for you and your team will course you :)

如果您没有Observable的先验知识，那将是您的痛苦，您的团队将为您服务:)

2. What can Observable and RxJS offer to me?

2. Observable和RxJS能为我提供什么？

When it comes to async logic Observable is your Swiss knife, Observable can literally do almost everything for you. You should never compare them to promises or generators it's far more powerful, it's same like comparing Optimus Prime with Chevrolet.

当谈到异步逻辑Observable是你的瑞士刀时，Observable可以为你做几乎所有事情。你永远不应该将它们与承诺或生成器进行比较，它更强大，就像比较擎天柱和雪佛兰一样。

And what about RxJS? It's like lodash.js but for async logic, once you in you will never switch to something different.

那么RxJS呢？它就像lodash.js，但是对于异步逻辑，一旦你进入你就永远不会切换到不同的东西。

3. Reactive extension

3.无功扩展

Just check this link

只需查看此链接即可

http://reactivex.io/languages.html

http://reactivex.io/languages.html

The reactive extension is implemented for all modern programming languages, it's just your key to functional programming.

针对所有现代编程语言实现了反应式扩展，它只是函数式编程的关键。

So spend your time wisely learn RxJS and use redux-observable :)

所以花时间明智地学习RxJS并使用redux-observable :)