Cascading fetching of entities from different data sources

[aksonov]

I have Messages contained Profile that contain Image. Is it possible to use Combinators to load everything effectively (with caching and without boilerplate)? I can't use Relay/Falcor because data is from xmpp server. Sorry I'm new in FRP and cannot figure out how to do it. I've implement it with Redux, but it contains a lot of boilerplate...

[milankinen]

Hi @aksonov and sorry for the delayed answer.

Yes, it's possible to do caching and efficient loading with observables and actually it doesn't even involve Combinators at all (they just show the result). I don't have enough specs to give any specific answers but in the end, the whole logic is just some observable/stream processing (e.g. combinations of scan, map, flatMap) and Combinators are just way to display the result of that processing. There is a lot of RxJS tutorials and stackoverflow answers, I'd recommend to start from those.

Btw. react.combinators is a deprecated and I'd recommend to use react.reactive or calmm-js instead. The idea is same as in Combinators but API has evolved a bit.

[aksonov]

@milankinen Thanks! I'm studying FRP now and trying to understand how to achieve my task. About suggested packages - I'm quite disappointed now what to choose and seems both doesn't wrap existing react elements but provides own ones - like K.p, is it true? I just want wrap elements with something like Combinator you implemented here. Actually i'm working on React Native app.

But atom concept looks very interesting.

[aksonov]

Looks like react.reactive supports wrapping of standalone React elements just R(DatePicker), will check how it works with React Native.

[milankinen]

Yes. React native components are just normal React components so you can wrap them all if you want. Something like this (written ad hoc, not tested!):

// native.reactive.js
import R from "react.reactive"
import {Component} from "react"
import * as rn from "react-native"

const exports = {}
Object.keys(rn).forEach(key => {
  const comp = rn[key]
  if (comp instanceof Component) exports[key] = R(comp)
}
module.exports = exports
module.exports.default = exports

// your-app.js
import R from "./native.reactive"
...
<R.Text>{myObservable}</R.Text>

[aksonov]

It runs perfect, thanks! The only issue i had to remove .babelrc from the package, because it conflicted with react native babelrc settings. Do you have any idea how to avoid that? I've successfully implemented counter example with react.reactive + calmm-js but have to remove .babelrc manually to run it.

I could fork all stack and remove .babelrc, but it doesn't look good..

[aksonov]

Could it be related? https://github.com/gaearon/redux-thunk/pull/44 ?

[milankinen]

You can add .babelrc to .npmignore and send a PR!

If you're using CALMM for state management, I'd recommend to use either bacon.react.html or kefir.react.html instead of react.reactive because they'll probably work better together.

[aksonov]

I've moved to package.json and sent PR, looks like more elegant solution. I've tried kefir.react.html but it doesn't work under React Native on packager-level (something wrong with directory signal or something like that)

[aksonov]

Submitted PR, please check