javascript RxJS史诗提供者

Posted 2021-05-03

import React, {createContext} from 'react'
const EpicContext = createContext({setEpic:(epic) =>{console.log('No provider for epic detected')}})
export default EpicContext
export const withEpicContext = (Component) => ({children, ...props}) =>
 ( 
 <EpicContext.Consumer>
  {
    ({setEpic}) => (
        <Component {...props} setEpic={setEpic}>{children}</Component>
    )
  }
  </EpicContext.Consumer>
    )

import React from 'react'
import {createStore, applyMiddleware} from'redux'
import {createEpicMiddleware} from 'redux-observable'
import { filter, mapTo, takeUntil, switchMap, mergeMap}  from 'rxjs/operators'
import {BehaviorSubject} from 'rxjs'
import {interval} from 'rxjs'
import rootReducer from './src/ducks/BaseReducer'
import EpicContext from './src/components/EpicContext'

const EpicProvider = EpicContext.Provider
const observableMiddleware = createEpicMiddleware()
const store = createStore(rootReducer,{ num:1 }, applyMiddleware(observableMiddleware))
// Set initial action stream
const epic$ = new BehaviorSubject((action$) => {
  return interval(1000).pipe(mapTo({type:"PING"}), takeUntil(action$.pipe(filter(({type}) => type === "PONG"))))
})
const setEpic = (epic) => {epic$.next(epic)}
// Use switchMap to switch between epics or mergeMap to add new epics
const rootEpic = (action$, state$) => epic$.pipe(switchMap(epic => epic(action$, state$)))

observableMiddleware.run(rootEpic)
export let wrapRootElement = ({element}) => {
  return (
  <EpicProvider value={{setEpic}}>
    <Provider store={store}>{element}</Provider>
  </EpicProvider>
  )
}

import {withEpic} from './EpicContext'
import {of} from 'rxjs'
import epic from './anotherEpic'
export default withEpic(epic)(({setEpic}) => {
  <button onClick={() => {setEpic(action$ => {
    return of({type: 'PONG'})
  })}}
  >START PONG</button>
  
})