question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Redux-observable?

See original GitHub issue

Any thought on adding redux-observable support?

Could look something like:

@kea({
    key: (props) => props.id,

    path: (key) => ['scenes', 'homepage', 'slider', key],

    actions: () => ({
        updateSlide: index => ({ index })
    }),

    reducers: ({ actions, key, props }) => ({
        currentSlide: [props.initialSlide || 0, PropTypes.number, {
            [actions.updateSlide]: (state, payload) => payload.key === key ? payload.index % images.length : state
        }]
    }),

    selectors: ({ selectors }) => ({
        currentImage: [
            () => [selectors.currentSlide],
            (currentSlide) => images[currentSlide],
            PropTypes.object
        ]
    }),

    epic: (action$, store, selectors) => action$
        .ofType(SOMETHING_INIT)
        .map(() =>
            selectors.getSlideImages(store.getState()) 
        )
        .map(images => ({
            ...images,
            ...getSlideMetaData(store.getState(), images.cardSelection)
        }))
        //..etc...
})

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
mariusandracommented, Sep 29, 2017

Hey, starting with v0.25, kea-saga is now a separate package and all redux-saga code has been ripped out of the main package.

I also added a kea-thunk package.

Next step: create a kea-observable package and add support for epics!

4reactions
mariusandracommented, Sep 14, 2017

So I read through the docs of RxJS and redux-observable.

I can definitely see how it’s an attractive alternative to redux-saga. Of course implementing it has some issues. The biggest ones:

1. Bundle size and redux-saga.

I’m quite sure that making rxjs a required dependency is a no-go. At the same time, if you use redux-observable, you might want to omit redux-saga from your bundle.

While we’re at it, could we make Kea flexible enough to add new side-effect libraries in the future? I’m sure that with redux-observable we haven’t seen the end of it.

Thus I’m favouring some sort of plugin system. But then, how to implement it? How to opt in to the features you want? How to know what you even want? 😃.

I need to revisit the current code and think of ways to achieve this. It is in dire need of some refactoring anyway. In fact, I already started with refactoring the low hanging fruits.

I believe in the end it should be as simple as

// in your root index.js
import 'kea-saga'
import 'kea-epic' // or kea-observable?

// elsewhere in the code
import { kea } from 'kea' // and use normally

2. When and how to start and stop epics?

Assuming epics are injected into Kea properly, we get into the nitty gritty of how to use them. Here’s where I’ll need help the most.

The main issue is related to starting and stopping epics as components are mounted/unmounted. I think I have an idea how to do it

Starting is probably easy. Here’s how it’s done for the Sagas - I create a channel, onto which kea sends all sagas that need to be started. The sagas themselves pay attention to if they’re already running or not.

Then when the component unmounts, I send a cancel event on the same channel.

How to do it with observables? I guess something similar would work? How to assure that only one instance of a observable is running?

Are there any common ways to stop observables, other than .takeUntil(action$.ofType("@@kea/unmounted/scenes.homepage.index"))?

3. Syntactic sugar

With sagas, in Kea you can do yield this.get('nameOfSelector') and that’s syntactic sugar for yield select(this.selectors.nameOfSelector). Should we have anything similar for redux-observable?

As by your example, we’d be anyway passing both the store and selectors to the epic, we could as well combine them into a “select” function, e.g.:

    // select = (selectorName) => selectors[selectorName](store.getState())

    epic: (action$, store, select) => action$
        .ofType(SOMETHING_INIT)
        .map(() =>
            select('slideImages')
        )
        .map(images => ({
            ...images,
            ...select('slideMetadata')
        }))
        //..etc...

… and/or how to give to the epic the created actions? Perhaps something like:

    // select = (selectorName) => selectors[selectorName](store.getState())

    epic: ({ actions, select }) => (action$, store) => action$
        .ofType(actions.initAction)
        .map(() =>
            select('slideImages')
        )
        .map(images => ({
            ...images,
            ...select('slideMetadata')
        }))
        .delay(1000)
        .map(image => actions.doSomethingToImage(image))
        //..etc...

… or to simplify the first line like:

    epic: ({ actions, select, action$, store }) => action$

… ? 😃

As I haven’t used redux-observable, I don’t know what is the best way forward here. I need to play around with it. So all sort of feedback is welcome! 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction · redux-observable
*redux-observable is a community-driven, entirely volunteer project and is not officially affiliated with or sponsored by any company. :shipit: ...
Read more >
RxJS middleware for action side effects in Redux using "Epics"
RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org. Note: this project is quite ...
Read more >
A Beginner's Guide to RxJS & Redux Observable
Redux -Observable is an RxJS-based middleware for Redux that allows developers to work with async actions. It's an alternative to redux-thunk ...
Read more >
Reactive Apps with Redux, RxJS, and Redux-Observable
redux -observable is a library for handling asynchronous tasks in Redux. It works by capturing a dispatched action from Redux and does some...
Read more >
A beginner's guide to redux-observable - LogRocket Blog
Redux -Observable is a Redux middleware that allows you to filter and map actions using RxJS operators. RxJS operators like filter() and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found