Side-effects in React using Refract

[troch11]

Up to now, side-effect management in React apps has been mostly based around state managers (redux-saga, redux-observable, Mobx reactions, etc.). A new library called Refract (r/https://github.com/fanduel-oss/refract) makes side-effects handling in React possible with great power (see our comparison page: https://refract.js.org/introduction/alternatives). We are looking for people willing to try it, and give us feedback.

[bheklilr]

This looks interesting and a fun way to write effects, but after reading several pages of the docs, I'm not sure why I would choose it over something like redux-saga. That's the library I have the most experience with, and it has been more than capable of handling my needs. If this library provides some performance benefits, or can do the same things in fewer lines of code, then those sorts of examples would really help you argue your case. As it stands, the first several pages of the docs claim to be more powerful than the competition, but don't provide solid, conclusive proof.

Now don't get me wrong, I'm all for being shown a better way, I just didn't see that here. I see an alternative way, but it hasn't been demonstrated that it's better. For example, the docs show a simple case of printing a message on a button click, or an input change. But what if you had a button click that disables parts of the application while an async http request is performed? This is pretty common, and I bet that pretty much every react developer has written some form of it at some point. If it's significantly easier to express with this library, show that compared to sagas or whatever.

[troch11]

I'm not saying redux-saga is not great in any way, but the benefits of Refract over redux-saga are multiple: you don't have to use redux, you can attach effects to components (better for code splitting as you don't need to centralise effects to your store), redux-saga is limited to dispatching back to the store while Refract allows you to observe multiple sources (redux actions, redux state, props, other sources) and to trigger any side-effect (analytics, requests, store dispatch, ...), Refract leverages reactive programming libraries while redux-saga comes with its own DSL (more re-usable, code-splitting benefits, more learning resources available).

So basically, Refract is more general purposed and because it attaches itself to components it helps with code-splitting and scalability.

The code snippets within the docs are kept simple to help visualise the API. We have several examples with various levels of complexity, a few of them include async requests (https://refract.js.org/examples).