Reimplement redux observable with only RxJs?

Question

I am trying to see (out of curiosity) how complex it would be to reimplement basic redux / redux-observable behavior with pure Rxjs.

Here is my take on it, but it seems incredibly too simple to be right. Can anyone point me at any errors/flaws in my logic ?

Thank you very much

 // set up the store.dispatch functionnaly through a subject (action$.next() is like store.dispatch()) var action$ = new Rx.Subject() // Create epics that do nothing interesting function epic1(action$) { return action$.filter(action => action.type == "test").delay(1000).mapTo({ type: "PONG" }) } function epic2(action$) { return action$.filter(action => action.type == "test2").delay(2000).mapTo({ type: "PING" }) } //.... //Later on, Merge all epic into one observable // function activateAndMergeEpics(action$, ...epics) { // give the action$ stream to each epic var activatedArray = epics.map(epic => epic(action$)) // merge them all into one megaObservable var merged = Rx.Observable.merge(...activatedArray) return merged } var merged = activateAndMergeEpics(action$, epic1, epic2) // Pipe your megaObservable back inside the loop so // you can process the action in your reducers var subscription = merged.subscribe(action$) function rootReducer(state = {}, action) { console.log(action) return (state) } // Generate your state from your actions var state$ = action$.scan(rootReducer, {}) // Do whatever your want now, like... // state$.map(route).map(renderdom) // Let's juste subscribe to nothing to get the stream pumping state$.subscribe() // Simulate a dispatch action$.next({ type: "test" }) // Another one action$.next({type:"test2"}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.min.js"></script> 

Answer 1

Yep, you've totally got the core functionality.

I hope you don't mind some unsolicited advice: If you're doing this just to learn how it works, I applaud you! That's such a great and surprisingly rare trait, even among programmers. I do want to caution against using your own home rolled redux clone because then you lose a lot of the huge benefits of redux; devtools, middleware, enhancers. You lose all of its built-in assertions/error checking, which actually is most of the code in redux (some of which is stripped out in production builds). You also loose fixes for edge cases that get shaked out over the years, which is sometimes why a given library might appear unnecessarily complex to anyone without that context.

You could add all those things, but then it would just be redux 🙃

If you do decide to go down that route, checkout some of the existing RxJS-based clones for inspiration (or collaboration) on yours:

• https://www.npmjs.com/package/reactive-state
• https://www.npmjs.com/package/rxdux
• https://www.npmjs.com/package/oddstream
• https://www.npmjs.com/package/rstore