Implement more React integration examples

[pH200]

These are some candidates in my mind:

• React router example
• Reusable components example - by integrating SoundCloud player component react-soundplayer
• Comparison of MVI and Flux

Requests are welcomed :)

[HighOnDrive]

Just learning about cycle,js and react-cycle, amazing! Here are a few more useful integrations:

• The just updated reactfire at https://www.firebase.com/blog/2015-07-15-reactfire-0-5-0.html
• Canvas element integration sample, basic drawing app
• Drag and drop integration sample
• Animation integration using the new react-motion API
• Relay, when it becomes available in August

[pH200]

@HighOnDrive cool! I've been a little busy lately, so these examples would have to wait. However, I think animation and Relay examples are going to be very useful :)

[HighOnDrive]

Been getting into Rx and Cycle and looking forward to what is in store for cycle-react, I'm sure it will inject something revolutionary and powerful into React when ready. It would be useful to see how MVI scales to a bigger modular app, maybe that is in the works?

In my initial vision Rx was useful for client event and server data streams, yet it is being applied to generate UI more or less on the fly by what I can tell in cycle.js/react-cycle. This is another leap for the web so maybe your tutorial can break this down a bit? Rx is quite amazing and a guided tour would help with the g-forces :)

[sunny-g]

+1 on examples with a router/navigator, especially with React Native.

The issue I'm running into with routing is that any routing/navigation solution available already for React or React Native hijack control over component rendering, preventing top-level control of the passing of props (since the last route now has to provide the props) as well as preventing any page-level component from exporting events that may, for example, mutate global state held within the root-level Cycle component.

For example, if I want to store authentication state in my root Cycle component so that other routes can use it, I'd normally be able to listen for an intent to change the model (e.g. interactions.listener('updateAuthState') from a Signin route.

When you use, say scene-router or react-native-router-flux, those intents are heard and absorbed by the router; so right now my current solution is to pass in an Rx.Subject to Signin as props so it can call props.get('authState$').onNext when it finished authenticating. I also pass in a router$ Rx.Subject as props to every route so that any route can call onNext, passing in route params and props, that will be received by the root component and used to call the actual function that does the routing, say scene.goto(path, props), etc.

tl;dr using any existing React-oriented router takes over and interrupts the data flow, forcing you to use more side-effects and imperative calls to change routes rather than sticking to the reactive data flow Cycle-React allows you to maintain. Any ideas?

[rayshih]

agree with @sunny-g

[pH200]

@sunny-g
So, I took a look at the latest version of react-native-router-flux, and I found that it does have good API for the side-effect-free architecture. I think it's obvious you need a router implemented in that way to work with Cycle-React. Fortunately, we can use NavigationExperimental which is also used by react-native-router-flux internally. I am not familiar with react-native TBH. However, I made the example app showing how to implement the navigator/router with cycle-react.

https://github.com/cycle-react-examples/cycle-react-native-router-example

Hope this helps. Finally, I am going to collect these examples and put them to a new website.

[rayshih]

@pH200 Thanks for the example. Do you recommend us to use NavigationExperimental right now?

[pH200]

@rayshih Judging from this doc the built-in navigator will become deprecated and will be soon replaced by NavigationExperimental. So yes, I recommend using NavigationExperimental or something that has similar design.