僅使用RxJs重新實現redux可觀察到的？

Question

我試圖（出於好奇）看到用純Rxj重新實現基本的redux / redux-observable行為是多么復雜。

這是我對它的看法，但看起來非常簡單。 任何人都可以指出我的邏輯中的任何錯誤/缺陷嗎？

非常感謝你

 // 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

是的，你已經完全掌握了核心功能。

我希望你不介意一些不請自來的建議：如果你這樣做只是為了了解它是如何工作的，我為你鼓掌！ 即使在程序員中也是如此，這是一個如此偉大且令人驚訝的罕見特征。 我確實想提醒你不要使用你自己的家庭滾動redux克隆，因為你失去了很多redux的巨大好處; devtools，中間件，增強器。 您丟失了所有內置的斷言/錯誤檢查，這實際上是redux中的大部分代碼（其中一些代碼在生產版本中被刪除）。 您還會對多年來出現的邊緣情況進行修復，有時為什么給定的庫可能會在沒有該上下文的情況下顯得不必要地復雜化。

你可以添加所有這些東西，但那時它只是redux🙃

如果您決定沿着這條路走下去，請查看一些現有的基於RxJS的克隆，以獲取您的靈感（或協作）：

• 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