Eliminate Rx in favor of something else?

[bebraw]

Rx looks kind of a large dependency. baobab would seem like a lighter alternative though I'm sure you'll find others. Maybe drop Ramda while at it? All of this depends on the size of a distribution build, though. If it's small enough (<50k?), perhaps current solution is enough.

[bobiblazeski]

Making production ready carousel will definitely need smaller code size but currently I'm more interested in experimenting in finding the right way to do animations with React, instead of making production ready component so dependency eliminations will wait at least for a while. Regarding baobab I don't know anything about it, and I don't see what it brings on the table, until I see a demo & code with something non trivial animated in it, like my carousel I'll remain skeptical. I love to be proven wrong so contributions are welcome, feel free to fork it and make a baobab version with it. If I like your approach will take another look at baobab.

[bebraw]

Rather than to get stuck with what store implementation to use one way to solve the issue is simply push the state out of the component. This is something I have done with reactabular and react-pagify.

The idea is that you provide some sort of sane defaults and a boilerplate. The user will then be able to replace the bits with customized pieces where it's needed. Even though it's a bit generic approach I think it fits components like these. It may take some extra effort from the user side but on the other hand as you leave state management out of the component it means less work for you.

You can start by coming up with a rough component spec. For carousel you could do perhaps something like this (adapted from your code):

<Carousel animation={...}>
    <Slide>whatever</Slide>
    <Slide>whatever</Slide>
    <Slide>whatever</Slide>
    <Slide>whatever</Slide>
</Carousel>
{... extra controls for prev/next etc. ...}

You would provide basic Carousel, Slide components, perhaps examples of basic controls and some starting points for animations.

[bobiblazeski]

I don't understand what are you suggesting. Store holds the state of the carousel, everything else is purely functional. The hard part is how to eliminate state at store while keeping the implemented functionality. And I don't know how to do it, if you have any working idea, send me the link with source & demo of your approach.

[bebraw]

It's possible to push the state out like this (forgot from my definition):

<Carousel animation={...} currentSlide={0}>
...
</Carousel>

Carousel would detect when currentSlide changes and then trigger animation to transition between previous and new. I wonder what should happen if there's an ongoing transition when slide changes, though.

Anyway, the point was that it's possible to keep the component relatively simple by pushing these kind of concerns out of it. It will have to manage transition logic to some extent but apart from that it can be store agnostic I think.

The nice thing about this approach that implementing additional controls (say next/prev/first/last buttons) would be just a matter of manipulating currentSlide state which exists outside of the component. How you do this (normal React state, store, whatever) is up to the user.