Comments (10)
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!
from kea.
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! :)
from kea.
FWIW the error swallowing bug was fixed in rxjs 5.5.6 ✌️
from kea.
Hey, this looks pretty cool. I've never used RxJS myself and didn't know about redux-observable until now. I watched the 37min talk the docs linked to and that's about as much as I know about it now. So I need to play with it a bit before I can give you an informed opinion about this. :)
from kea.
@keshavkaul no official support yet, however the upgrades in kea 1.0 should make it very easy to roll your own plugin. See here how sagas are done: https://github.com/keajs/kea-saga/blob/big-rewrite/src/saga/index.js
My priority now is to get 1.0 out (few issues remaining). I can try to visit observables once that is done.
from kea.
It's worth the look into. I like sagas but, moved from them because it's super redux specific while observables aren't and I can move them around everywhere (middleware, components, backend, etc...). It's basically "lodash for async".
If I have some time soon, I could pitch in.
from kea.
-
I like the plugin concept. redux-observable is fairly small since you can also add in the operators as you need them (
import 'rxjs/add/operator/map';
) -
I haven't needed to unsubscribe any of my epics but, this is a good read on the topic https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87. Looks like
takeUntil
(ortakeWhile
) would be ideal. -
I'm a big fan of
epic: ({ actions, select }) => (action$, store) => action$
. Less to rewrite when migrating or copy and pasting :)
from kea.
these errors make me think of replace Redux Observable with Redux saga
redux-observable/redux-observable#94
redux-observable/redux-observable#263
from kea.
@mariusandra Any update on the status of supporting redux-observable
?
from kea.
Gonna close this issue. I'm not going to build an official plugin for redux-observable, but with Kea 3.0 and logic builders, these plugins should be much easier to build than ever before. See for example how kea-saga is built.
from kea.
Related Issues (20)
- pass component props to logic HOT 3
- Is there a way to use generics with `MakeLogicType` ? HOT 3
- BindLogic + automatic connections support? HOT 4
- ListenerFunction’s Typescript return type should be " any | Promise<any>" HOT 1
- could Redux be separate from kea? HOT 1
- Using parameters when getting values? HOT 2
- Still having issues to unit test connected components HOT 1
- Using equality comparison in selectors HOT 4
- Updating part of connected logic HOT 2
- Accessing whole state in reducers HOT 1
- Update instructions for Next.js support with SSR HOT 2
- How to test `propsChanged` ? HOT 1
- Kea does not unmount logic when using lazy components with suspense HOT 2
- When will the translation of the document begin? HOT 1
- Link in About on GitHub repo is dead HOT 1
- How to do something like router.pop() HOT 4
- How to access a reducer of same logic into other logic. HOT 3
- Typegen defaultMaximumTruncationLength HOT 2
- Please specify the recommended order in which actions, listeners, shared listeners must be written in kea([]) HOT 1
- Selector types and limitation to only 11 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kea.