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>

score 3 · Accepted Answer · answered Oct 05 '17 at 18:33

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:

Wow, answer from the creator itself, cool ! Well Thanks for your advise and your answer! I had already read the "why you did it with Redux and not from scratch?" from Ben Lesh article here: [Ben Lesh article](https://medium.com/@benlesh/redux-observable-ec0b00d2eb52) — TheoH, Oct 06 '17 at 07:14

Reimplement redux observable with only RxJs?

1 Answers1