First of All

createEpicMiddleware(rootEpic)

createEpicMiddleware is used to create an instance of the actual redux-observable middleware, and you should provide a single, root Epic

Arguments

  1. rootEpic: Epic: The root Epic

  2. [options: Object]: The optional configuration.

  • dependencies: If given, it will be injected as the 3rd argument to all Epics,

  • adapter: An adapter object which can transform the input/output streams provided to your epics, Usually used to adapt a stream library other than RxJS v5, like adapter-rxjs-v4 or adapter-most Options:

    *   `input: ActionsObservable => Any`: Transforms the input stream of actions, `ActionsObservable` that is passed to your root Epic(transformation takes place before it is passed to the root Epix)

*   `output: any => Observable`: Transforms the return value of root Epic(transform takes place after the root epic returned it)

Returns

`MiddlewareAPI`: An instance of the redux-observable middleware

Example

import { createStore, applyMiddleware, compose } from 'redux'
import { createEpicMiddleware } from 'redux-observable'
import { rootEpic, rootRotuer } from './modules/root'

const epicMiddleware = createEpicMiddleware(rootEpic)

export default function configureStore () {
  const store = createStore(
    rootRotuer,
    applyMiddleware(epicMiddleware)
  )
  return store
}
`</pre>

### `combineEpics(...epic)`

`combineEpics` allows you to take multiple epics and combine them into a single one

#### Arguments

`...epics: Epic[]`: The epics to combine

#### Return

`(Epic)`: An Epic that merges the output of every Epic provided and passes along the `ActionObservable` and redux store as arguments

### Example

<pre>`import { combineEpics } from 'redux-observable'
import pingEpic from './ping'
import fetchUserEpic from './fetchUser'

export default combineEpics(
  pingEpic,
  fetchUser
)
`</pre>

### `EpicMiddleware`

An instance of the redux-observable middleware

To create it, pass your root Epic to `createEpicMiddleware`

`replaceEpic(nextEpic)`: Replaces the epic currently by the middleware, it is an advanced API. You might need this if your app implement code splitting and you want to load some of the epics dynamically or you're using hot reloading.

### Create Epic

<pre>`const pingEpic = action$ =&gt; action$.ofType('PING').mapTo({type: 'PONG'})
`</pre>

### Cancellation

<pre>`import { ajax } from 'rxjs/observable/dom/ajax'

const fetchUserEpic = action$ =&gt; action$.ofType('FETCH_USER').mergeMap(
  action =&gt; ajax.getJSON(`/api/user/${action.payload}`)
    .map(res =&gt; fetchUserFulfilled(res))
    .takeUntil(action$.ofType('FETCH_USER_CANCELLED'))
)
`</pre>

### Handling Error

<pre>`import { ajax } from 'rxjs/observable/dom/ajax'

const fetchUserEpic = action$ =&gt; action.ofType('FETCH_USER').mergeMap(
  action =&gt; ajax.getJSON(`/api/users/${action.payload}`)
  .map(res =&gt; fetchUserFulfilled(res))
  .catch(err =&gt; Observable.of({
    type: 'FETCH_USER_REJECTED',
    payload: err.xhr.response,
    error: true,
  }))
)
`</pre>

### dependencies Injecting

<pre>`import { createEpicMiddleware, combineEpics } from 'redux-observable'
import { ajax } from 'rxjs/observable/dom/ajax'
import rootEpic from './somewhere'

const epicMiddleware = createEpicMiddleware(rootEpic, {
  dependencies: { getJSON: ajax.getJSON }
})

const fetchUserEpic= (action$, store, { getJSON }) =&gt; action$.ofType('FETCH_USER').mergeMap(
  (action) =&gt; getJSON(`/api/users/${action.payload}`)
    .map(res =&gt; ({
      type: 'FETCH_USER_REJECTED',
      payload: res
    }))
)
`</pre>

### Adding New Epics Asynchronously/Lazily

<pre>`import { BehaviorSubject } from 'rxjs/BehaviorSubject'
import { combineEpics } from 'redux-observable'

const epic$ = new BehaviorSubject(combineEpics(epic1, epic2))
const rootEpic = (action$, store) =&gt; epic$.mergeMap(epic =&gt; epic(action$, store))

// sometime later ... add another Epic, keeping the state of the old ones...
epic$.next(asyncEpic1)
// and again later add another
epic$.next(asyncEpic2)