Redux Observable

https://redux-observable.js.org
Admin
Redux-Observable is an RxJS-based middleware for Redux, used to compose and cancel async actions to...
Tokens:12,505
Snippets:157
Trust Score:8.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Run Root Epic with Middleware

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

After creating the store, call `epicMiddleware.run()` with your root Epic to start the middleware.

```javascript
import { rootEpic } from './modules/root';

epicMiddleware.run(rootEpic);

```

--------------------------------

### Example Epic for Testing

Source: https://redux-observable.js.org/docs/recipes/WritingTests.html

This is a sample Epic that fetches user data from an API. It demonstrates dependency injection for the getJSON function.

```javascript
const fetchUserEpic = (action$, state$, { getJSON }) => action$.pipe(
  ofType('FETCH_USER'),
  mergeMap(action =>
    getJSON(`https://api.github.com/users/${action.id}`).pipe(
      map(response => ({ type: 'FETCH_USER_FULFILLED', response }))
    )
  )
);
```

--------------------------------

### Install Redux Observable

Source: https://redux-observable.js.org/

Install the stable version of redux-observable using npm. Ensure you have rxjs@6.x.x and redux@4.x.x installed as peer dependencies.

```bash
npm install --save redux-observable
```

--------------------------------

### Infinite Loop Example

Source: https://redux-observable.js.org/docs/basics/Epics.html

Demonstrates an incorrect Epic implementation that creates an infinite loop by returning the incoming action stream directly. Avoid this pattern.

```javascript
// DO NOT DO THIS
const actionEpic = action$ => action$; // creates infinite loop
```

--------------------------------

### Fetch User Epic Example

Source: https://redux-observable.js.org/docs/basics/Epics.html

This epic listens for FETCH_USER actions, makes an AJAX call to the GitHub API, and dispatches a FETCH_USER_FULFILLED action with the response.

```javascript
import { ajax } from 'rxjs/ajax';

// action creators
const fetchUser = username => ({ type: FETCH_USER, payload: username });
const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload });

// epic
const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action =>
    ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
      map(response => fetchUserFulfilled(response))
    )
  )
);

// later...
dispatch(fetchUser('torvalds'));

```

--------------------------------

### Testing an Epic with Mock Dependencies

Source: https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html

This example shows how to test an epic by directly calling it and providing a mock `getJSON` function within the `dependencies` object. This isolates the epic's logic for testing.

```javascript
import { of } from 'rxjs';
import { fetchUserEpic } from './somewhere/fetchUserEpic';

const mockResponse = { name: 'Bilbo Baggins' };
const action$ = of({ type: 'FETCH_USERS_REQUESTED' });
const state$ = null; // not needed for this epic
const dependencies = {
  getJSON: url => of(mockResponse)
};

// Adapt this example to your test framework and specific use cases
const result$ = fetchUserEpic(action$, state$, dependencies).pipe(
  toArray() // buffers output until your Epic naturally completes()
);

result$.subscribe(actions => {
  assertDeepEqual(actions, [{
    type: 'FETCH_USER_FULFILLED',
    payload: mockResponse
  }]);
});

```

--------------------------------

### Dispatching Actions Inside Epics (Before)

Source: https://redux-observable.js.org/MIGRATION.html

This example shows the older pattern of directly calling `store.dispatch` within an epic. This pattern is discouraged in newer versions.

```javascript
const somethingEpic = action$ =>
  action$.ofType(SOMETHING)
    .switchMap(() =>
      ajax('/something')
        .do(() => store.dispatch({ type: SOMETHING_ELSE }))
        .map(response => ({ type: SUCCESS, response }))
    );
```

--------------------------------

### Ping Reducer Example

Source: https://redux-observable.js.org/docs/basics/Epics.html

A simple Redux reducer that handles 'PING' and 'PONG' actions to manage a 'isPinging' state.

```javascript
const pingReducer = (state = { isPinging: false }, action) => {
  switch (action.type) {
    case 'PING':
      return { isPinging: true };

    case 'PONG':
      return { isPinging: false };

    default:
      return state;
  }
};

```

--------------------------------

### EpicMiddleware.run

Source: https://redux-observable.js.org/docs/api/EpicMiddleware.html

Runs the middleware with a root epic. This method can be called multiple times, for example, when implementing code splitting or hot reloading to dynamically load epics.

```APIDOC
## EpicMiddleware.run(rootEpic)

### Description
Runs the middleware with the provided epic. This is useful for dynamically loading epics, especially with code splitting or hot reloading.

### Method
`run`

### Parameters
#### Arguments
1. `rootEpic` (_Epic_) - Required - The root epic for the middleware to use.
```

--------------------------------

### Custom Root Epic for Most.js Stream Conversion

Source: https://redux-observable.js.org/MIGRATION.html

This example demonstrates how to create a custom root Epic to handle adapters, specifically converting RxJS Observables to Most.js streams and back. It includes a Most.js implementation of `combineEpics`.

```javascript
import most from 'most';
import { from } from 'rxjs';

// a Most.js implementatin of combineEpics
const combineEpics = (...epics) => (...args) =>
  most.merge(
    ...epics.map(epic => epic(...args))
  );

const rootEpic = (action$, state$, ...rest) => {
  const epic = combineEpics(epic1, epic2, ...etc);
  // action$ and state$ are converted from Observables to Most.js streams
  const output = epic(
    most.from(action$),
    most.from(state$),
    ...rest
  );

  // convert Most.js stream back to Observable
  return from(output);

};

```

--------------------------------

### Epic Using RxJS ajax Directly

Source: https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html

This example shows an epic that directly imports and uses `ajax.getJSON` from RxJS. This approach makes mocking dependencies for testing more difficult.

```javascript
import {
  ajax
} from 'rxjs/ajax';

const fetchUserEpic = (action$, state$) => action$.pipe(
  ofType('FETCH_USER'),
  mergeMap(({ payload }) => ajax.getJSON(`/api/users/${payload}`).pipe(
    map(response => ({
      type: 'FETCH_USER_FULFILLED',
      payload: response
    }))
  )
);

```

--------------------------------

### Import Specific RxJS Operators (v5)

Source: https://redux-observable.js.org/docs/Troubleshooting.html

For smaller bundles, import only the operators you need when using rxjs-compat or pre-1.0 redux-observable. This example shows importing 'switchMap'.

```javascript
import 'rxjs/add/operator/switchMap';
action$.ofType(...).switchMap(...);

// OR

import { switchMap } from 'rxjs/operator/switchMap';
action$.ofType(...)::switchMap(...);

```

--------------------------------

### Dispatching Actions Inside Epics (After)

Source: https://redux-observable.js.org/MIGRATION.html

This example demonstrates the recommended approach using RxJS pipeable operators. Actions are emitted through the observable returned by the epic, rather than direct dispatch calls.

```javascript
// Now uses rxjs v6 pipeable operators
const somethingEpic = action$ =>
  action$.pipe(
    ofType(SOMETHING),
    switchMap(() =>
      getJSON('/something').pipe(
        mergeMap(response => of(
          { type: SOMETHING_ELSE },
          { type: SUCCESS, response }
        ))
      )
    )
  );
```

--------------------------------

### Auto-Save Epic using State Observable

Source: https://redux-observable.js.org/MIGRATION.html

An example epic demonstrating how to react to state changes using `state$` observable for features like auto-saving. This code is untested and for illustrative purposes only.

```javascript
// This code is UNTESTED and likely has bugs, just here to give you the gist.
// It shows one possible way of having an auto-save feature based on the state
// changing instead of needing to know all the possible actions that could change
// that state.
const autoSaveEpic = (action$, state$) =>
  action$.pipe(
    ofType(AUTO_SAVE_ENABLE),
    exhaustMap(() =>
      state$.pipe(
        pluck('googleDocument'),
        distinctUntilChanged(),
        throttleTime(500, { leading: false, trailing: true }),
        concatMap(googleDocument =>
          saveGoogleDoc(googleDocument).pipe(
            map(() => saveGoogleDocFulfilled()),
            catchError(e => of(saveGoogleDocRejected(e)))
          )
        ),
        takeUntil(action$.pipe(
          ofType(AUTO_SAVE_DISABLE)
        ))
      )
    )
  );
```

--------------------------------

### Epic Definitions for Demonstrating Action Scheduling

Source: https://redux-observable.js.org/MIGRATION.html

Defines two epics, epic1 and epic2, and a rootEpic using combineEpics. This setup is used to illustrate the change in action emission order in redux-observable 1.0.0.

```javascript
const epic1 = action$ =>
  action$.pipe(
    ofType('FIRST'),
    mergeMap(() =>
      of({ type: 'SECOND' }, { type: 'THIRD' })
    )
  );

const epic2 = action$ =>
  action$.pipe(
    ofType('SECOND'),
    map(() => ({ type: 'FOURTH' })),
    startWith({ type: 'FIRST' })
  );

// notice that epic2 comes *after* epic1
const rootEpic = combineEpics(epic1, epic2);
```

--------------------------------

### Epic Missing Explicit Return

Source: https://redux-observable.js.org/docs/Troubleshooting.html

An epic must return an Observable. This example shows an epic that is missing an explicit return statement, which can lead to 'Cannot read property 'subscribe' of undefined' errors.

```javascript
const myEpic = action$ => { // MISSING EXPLICIT RETURN!
  action$.pipe(ofType(...), etc(...))
};

```

--------------------------------

### Setting up Middleware with rootEpic

Source: https://redux-observable.js.org/MIGRATION.html

Use this pattern to set up the `epicMiddleware` and run your `rootEpic` after the store is created. This is the recommended approach for redux-observable v1.0.0 and later.

```javascript
const epicMiddleware = createEpicMiddleware();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

epicMiddleware.run(rootEpic);

```

--------------------------------

### Configure Store with Redux Observable

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Integrate the `createEpicMiddleware` and `epicMiddleware.run()` into your existing store configuration file.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './modules/root';

const epicMiddleware = createEpicMiddleware();

export default function configureStore() {
  const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
  );

  epicMiddleware.run(rootEpic);

  return store;
}

```

--------------------------------

### Creating and Configuring Redux Store with createEpicMiddleware

Source: https://redux-observable.js.org/docs/api/createEpicMiddleware.html

This snippet shows how to create a Redux store using createEpicMiddleware, apply it with other middleware, and then run the root epic. It's essential for integrating redux-observable into your Redux application.

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './modules/root';

const epicMiddleware = createEpicMiddleware();

export default function configureStore() {
  const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
  );

  epicMiddleware.run(rootEpic);

  return store;
}

```

--------------------------------

### Configure Store with Redux DevTools

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Integrate Redux DevTools Extension by using `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` or the `redux-devtools-extension` package when creating the store.

```javascript
import { compose } from 'redux'; // and your other imports from before
const epicMiddleware = createEpicMiddleware();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(pingReducer,
  composeEnhancers(
    applyMiddleware(epicMiddleware)
  )
);

epicMiddleware.run(pingEpic);

```

--------------------------------

### Replacing Root Epic with takeUntil

Source: https://redux-observable.js.org/MIGRATION.html

Achieve similar behavior to `epicMiddleware.replaceEpic` by dispatching an 'END' action and running a new root epic. The root epic should use `takeUntil` to listen for the 'END' action.

```javascript
// Your root Epic uses function composition to add the takeUntil.
// It combines your epics together, but instead of returning that new combined epic
// it calls it, providing the action$, state$, etc so that we can pipe the takeUntil
// on the result
const rootEpic = (action$, ...rest) =>
  combineEpics(epic1, epic2, ...etc)(action$, ...rest).pipe(
    takeUntil(action$.pipe(
      ofType('END')
    ))
  );

function replaceRootEpic(nextRootEpic) {
  store.dispatch({ type: 'END' });
  epicMiddleware.run(nextRootEpic);
}
```

--------------------------------

### Configuring Epic Middleware with Dependencies

Source: https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html

This snippet demonstrates how to configure `createEpicMiddleware` to inject dependencies. The `getJSON` function from `ajax.getJSON` is provided as a dependency.

```javascript
import {
  createEpicMiddleware,
  combineEpics
} from 'redux-observable';
import {
  ajax
} from 'rxjs/ajax';
import rootEpic from './somewhere';

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

epicMiddleware.run(rootEpic);

```

--------------------------------

### Recommended Epic Action Emission (After)

Source: https://redux-observable.js.org/CHANGELOG.html

Demonstrates the recommended pattern for epics, where actions are emitted through the observable returned by the epic, avoiding direct calls to store.dispatch.

```javascript
const somethingEpic = action$ =>
  action$.ofType(SOMETHING)
    .switchMap(() =>
      ajax('/something')
        .mergeMap(response => Observable.of(
          { type: SOMETHING_ELSE },
          { type: SUCCESS, response }
        ))
    );
```

--------------------------------

### Dispatching Actions

Source: https://redux-observable.js.org/docs/basics/Epics.html

Illustrates the sequence of actions dispatched, first 'PING' and then 'PONG'.

```javascript
dispatch({ type: 'PING' });
dispatch({ type: 'PONG' });

```

--------------------------------

### Create Redux Observable Middleware

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Instantiate the `createEpicMiddleware` to be used when configuring the Redux store.

```javascript
import { createEpicMiddleware } from 'redux-observable';

const epicMiddleware = createEpicMiddleware();

```

--------------------------------

### Testing an Epic with TestScheduler

Source: https://redux-observable.js.org/docs/recipes/WritingTests.html

This snippet shows how to test the fetchUserEpic using RxJS's TestScheduler. It sets up mock hot and cold observables for actions and dependencies, and uses expectObservable to assert the output.

```javascript
import { TestScheduler } from 'rxjs/testing';

const testScheduler = new TestScheduler((actual, expected) => {
  // somehow assert the two objects are equal
  // e.g. with chai `expect(actual).deep.equal(expected)`
});

testScheduler.run(({ hot, cold, expectObservable }) => {
  const action$ = hot('-a', {
    a: { type: 'FETCH_USER', id: '123' }
  });
  const state$ = null;
  const dependencies = {
    getJSON: url => cold('--a', {
      a: { url }
    })
  };

  const output$ = fetchUserEpic(action$, state$, dependencies);

  expectObservable(output$).toBe('---a', {
    a: {
      type: 'FETCH_USER_FULFILLED',
      response: {
        url: 'https://api.github.com/users/123'
      }
    }
  });
});
```

--------------------------------

### Combine Epics for Root Epic

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Use `combineEpics` to create a single root Epic from multiple individual Epics. This is recommended for organizing your Epics.

```javascript
import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import ping, { pingEpic } from './ping';
import users, { fetchUserEpic } from './users';

export const rootEpic = combineEpics(
  pingEpic,
  fetchUserEpic
);

export const rootReducer = combineReducers({
  ping,
  users
});

```

--------------------------------

### createEpicMiddleware

Source: https://redux-observable.js.org/docs/api/createEpicMiddleware.html

Creates an instance of the redux-observable middleware. This middleware is essential for connecting epics to your Redux store.

```APIDOC
## createEpicMiddleware

### Description
Creates an instance of the actual redux-observable middleware.

### Signature
`createEpicMiddleware([options])`

### Parameters
#### Arguments
  1. `[options: Object]` - Optional configuration object.
     * `dependencies` - An object containing dependencies to be injected as the 3rd argument to all epics.

### Returns
`MiddlewareAPI` - An instance of the redux-observable middleware.

### Example
```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './modules/root';

const epicMiddleware = createEpicMiddleware();

export default function configureStore() {
  const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
  );

  epicMiddleware.run(rootEpic);

  return store;
}
```
```

--------------------------------

### Import All RxJS Operators (v5)

Source: https://redux-observable.js.org/docs/Troubleshooting.html

If using rxjs-compat or pre-1.0 redux-observable, import 'rxjs' to add all core RxJS operators to the Observable prototype. This is useful for quickly enabling all operators.

```javascript
import 'rxjs';

```

--------------------------------

### Apply Middleware to Redux Store

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Pass the created `epicMiddleware` to the `applyMiddleware` function when creating your Redux store.

```javascript
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  rootReducer,
  applyMiddleware(epicMiddleware)
);

```

--------------------------------

### Equivalent of combineEpics using merge

Source: https://redux-observable.js.org/docs/basics/Epics.html

Demonstrates the underlying mechanism of `combineEpics` by using RxJS `merge` to combine epic streams manually. This is equivalent to using `combineEpics`.

```javascript
import { merge } from 'rxjs/observable/merge';

const rootEpic = (action$, state$) => merge(
  pingEpic(action$, state$),
  fetchUserEpic(action$, state$)
);

```

--------------------------------

### Accessing State Reactively (After)

Source: https://redux-observable.js.org/MIGRATION.html

Demonstrates a more reactive approach to accessing state using `withLatestFrom` and `state$` observable. Requires v6 pipe operators.

```javascript
// or the "reactive" way, but more verbose.

const fetchUserEpic = (action$, state$) =>
  action$.pipe(
    ofType(FETCH_USER),
    withLatestFrom(state$),
    mergeMap(([action, state]) =>
      getJson(`/users/${action.id}`, { 'Authorization': `Bearer ${state.authToken}` }).pipe(
        map(respose => fetchUserFulfilled(response))
      )
    )
  );
```

--------------------------------

### HMR with switchMap

Source: https://redux-observable.js.org/docs/recipes/HotModuleReplacement.html

Use this pattern for Hot Module Replacement when you want to automatically unsubscribe from the previous epic and subscribe to the new one. It's suitable for development environments.

```javascript
import { rootEpic } from './where-ever-they-are';
import { BehaviorSubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const epicMiddleware = createEpicMiddleware();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

const epic$ = new BehaviorSubject(rootEpic);
// Every time a new epic is given to epic$ it
// will unsubscribe from the previous one then
// call and subscribe to the new one because of
// how switchMap works
const hotReloadingEpic = (...args) =>
  epic$.pipe(
    switchMap(epic => epic(...args))
  );

epicMiddleware.run(hotReloadingEpic);

if (module.hot) {
  module.hot.accept('./where-ever-they-are', () => {
    const nextRootEpic = require('./where-ever-they-are').rootEpic;
    epic$.next(nextRootEpic);
  });
}
```

--------------------------------

### Basic Ping Epic

Source: https://redux-observable.js.org/docs/basics/Epics.html

Listens for actions of type 'PING' and maps them to a new action 'PONG'. Imports for RxJS operators are omitted for brevity.

```javascript
const pingEpic = action$ => action$.pipe(
  filter(action => action.type === 'PING'),
  mapTo({ type: 'PONG' })
);

// later...
dispatch({ type: 'PING' });

```

--------------------------------

### Accessing State Imperatively (Before)

Source: https://redux-observable.js.org/MIGRATION.html

Illustrates the older method of accessing Redux state using `store.getState()` within an epic.

```javascript
const fetchUserEpic = (action$, store) =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax(`/users/${action.id}`, { 'Authorization': `Bearer ${store.getState().authToken}` }) // <----- here
        .map(response => fetchUserFulfilled(response))
    );
```

--------------------------------

### Combine Multiple Epics

Source: https://redux-observable.js.org/docs/api/combineEpics.html

Use `combineEpics` to merge multiple epics into a single one. The order of epics determines their execution sequence.

```javascript
import { combineEpics } from 'redux-observable';
import pingEpic from './ping';
import fetchUserEpic from './fetchUser';

export default combineEpics(
  pingEpic,
  fetchUserEpic
);
```

--------------------------------

### Dynamically Add Epics with BehaviorSubject

Source: https://redux-observable.js.org/docs/recipes/AddingNewEpicsAsynchronously.html

Use a BehaviorSubject to manage a stream of epics. New epics can be added by calling `next()` on the BehaviorSubject, which will then be merged into the root epic.

```javascript
import { BehaviorSubject } from 'rxjs';
import { combineEpics } from 'redux-observable';

const epic$ = new BehaviorSubject(combineEpics(epic1, epic2));
const rootEpic = (action$, state$) => epic$.pipe(
  mergeMap(epic => epic(action$, state$))
);

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

--------------------------------

### HMR with mergeMap and EPIC_END

Source: https://redux-observable.js.org/docs/recipes/HotModuleReplacement.html

This pattern uses mergeMap and an EPIC_END action to signal the end of running epics before setting up a new one. It provides explicit control over epic lifecycle during HMR.

```javascript
import { rootEpic } from './where-ever-they-are';
import { ofType } from 'redux-observable';
import { BehaviorSubject } from 'rxjs';
import { mergeMap, takeUntil } from 'rxjs/operators';

const epicMiddleware = createEpicMiddleware();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

const epic$ = new BehaviorSubject(rootEpic);
// Since we're using mergeMap, by default any new
// epic that comes in will be merged into the previous
// one, unless an EPIC_END action is dispatched first,
// which would cause the old one(s) to be unsubscribed
const hotReloadingEpic = (action$, ...rest) =>
  epic$.pipe(
    mergeMap(epic =>
      epic(action$, ...rest).pipe(
        takeUntil(action$.pipe(
          ofType('EPIC_END')
        ))
      )
    )
  );

epicMiddleware.run(hotReloadingEpic);

if (module.hot) {
  module.hot.accept('./where-ever-they-are', () => {
    const nextRootEpic = require('./where-ever-they-are').rootEpic;
    // First kill any running epics
    store.dispatch({ type: 'EPIC_END' });
    // Now setup the new one
    epic$.next(nextRootEpic);
  });
}
```

--------------------------------

### Deprecated store.dispatch in Epics (Before)

Source: https://redux-observable.js.org/CHANGELOG.html

Illustrates the deprecated pattern of calling store.dispatch directly within an epic. This approach is discouraged in favor of emitting actions through the observable.

```javascript
const somethingEpic = (action$, store) =>
  action$.ofType(SOMETHING)
    .switchMap(() =>
      ajax('/something')
        .do(() => store.dispatch({ type: SOMETHING_ELSE }))
        .map(response => ({ type: SUCCESS, response }))
    );
```

--------------------------------

### Epic Using Injected getJSON Dependency

Source: https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html

This epic is modified to accept an injected `getJSON` function as its third argument, allowing for easier testing by swapping out the real implementation with a mock.

```javascript
// Notice the third argument is our injected dependencies!
const fetchUserEpic = (action$, state$, { getJSON }) => action$.pipe(
  ofType('FETCH_USER'),
  mergeMap(({ payload }) => getJSON(`/api/users/${payload}`).pipe(
    map(response => ({
      type: 'FETCH_USER_FULFILLED',
      payload: response
    }))
  )
);

```

--------------------------------

### combineEpics

Source: https://redux-observable.js.org/docs/api/combineEpics.html

Combines multiple epics into a single epic. The order of epics determines their execution order.

```APIDOC
## combineEpics

### Description
Combines multiple epics into a single epic. The order in which epics are combined affects the order in which they are executed and receive actions.

### Arguments
* `...epics: Epic[]`: The epics to combine.

### Returns
* `Epic`: An Epic that merges the output of every Epic provided and passes along the action Observable and redux store as arguments.

### Example
#### epics/index.js
```javascript
import { combineEpics } from 'redux-observable';
import pingEpic from './ping';
import fetchUserEpic from './fetchUser';

export default combineEpics(
  pingEpic,
  fetchUserEpic
);
```
```

--------------------------------

### Ping Epic with Delay

Source: https://redux-observable.js.org/docs/basics/Epics.html

An Epic that waits for 1 second after receiving a 'PING' action before dispatching a 'PONG' action. This demonstrates handling asynchronous operations.

```javascript
const pingEpic = action$ => action$.pipe(
  filter(action => action.type === 'PING'),
  delay(1000), // Asynchronously wait 1000ms then continue
  mapTo({ type: 'PONG' })
);

// later...
dispatch({ type: 'PING' });

```

--------------------------------

### Reactive State Access in Epic

Source: https://redux-observable.js.org/docs/basics/Epics.html

Access the latest state reactively within an epic using `withLatestFrom`. This is preferred for more complex state-dependent logic.

```javascript
const incrementIfOddEpic = (action$, state$) => action$.pipe(
  ofType(INCREMENT_IF_ODD),
  withLatestFrom(state$),
  filter(([, state]) => state.counter % 2 === 1),
  map(() => increment())
);

```

--------------------------------

### TypeScript: Define Action Types and Creators

Source: https://redux-observable.js.org/docs/Troubleshooting.html

Define action types and creators for use with Redux and redux-observable.

```typescript
import { Action } from 'redux'

const enum ActionTypes {
  One = 'ACTION_ONE',
  Two = 'ACTION_TWO',
}
const doOne = (myStr: string): One => ({ type: ActionTypes.One, myStr })
const doTwo = (myBool: boolean): Two => ({ type: ActionTypes.Two, myBool })

interface One extends Action {
  type: ActionTypes.One
  myStr: string
}
interface Two extends Action {
  type: ActionTypes.Two
  myBool: boolean
}
type Actions = One | Two

```

--------------------------------

### TypeScript: Correct Type Narrowing with ofType

Source: https://redux-observable.js.org/docs/Troubleshooting.html

Shows the correct way to use the `ofType` operator by explicitly setting the generic type argument to `One`. This ensures TypeScript correctly narrows the action type within the observable stream.

```typescript
// Explicitly set generics fixes the issue
const epic = (action$: ActionsObservable<Actions>) =>
  action$.pipe(
    ofType<One>(ActionTypes.One),
    // action is correctly narrowed to One
    map((action) => {...})
  );

```

--------------------------------

### ofType TypeScript Overload for Narrowing

Source: https://redux-observable.js.org/CHANGELOG.html

Shows how to use the ofType operator with a TypeScript overload to narrow down the action type, improving type safety when filtering actions.

```typescript
action$.ofType<SomeNarrowAction>(someType);
```

--------------------------------

### User Reducer for Fetched Data

Source: https://redux-observable.js.org/docs/basics/Epics.html

This standard Redux reducer handles the FETCH_USER_FULFILLED action to update the store with user data.

```javascript
const users = (state = {}, action) => {
  switch (action.type) {
    case FETCH_USER_FULFILLED:
      return {
        ...state,
        // `login` is the username
        [action.payload.login]: action.payload
      };

    default:
      return state;
  }
};

```

--------------------------------

### Add Global Error Handler to Root Epic

Source: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

Use `catchError` to handle uncaught errors within your root Epic, preventing the stream from terminating and allowing epics to continue running.

```javascript
const rootEpic = (action$, store$, dependencies) =>
  combineEpics(...epics)(action$, store$, dependencies).pipe(
    catchError((error, source) => {
      console.error(error);
      return source;
    })
  );

```

--------------------------------

### Cancel AJAX Request with takeUntil

Source: https://redux-observable.js.org/docs/recipes/Cancellation.html

Use `takeUntil()` to cancel an ongoing AJAX request when a specific cancellation action is dispatched. This operator is placed inside `mergeMap` to ensure only the inner observable chain is affected, allowing the Epic to continue listening for future actions.

```javascript
import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => ajax.getJSON(`/api/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    takeUntil(action$.pipe(
      ofType(FETCH_USER_CANCELLED)
    ))
  ))
);

```

--------------------------------

### Cancel and Emit Different Action with race

Source: https://redux-observable.js.org/docs/recipes/Cancellation.html

Utilize the `race()` operator to cancel a pending AJAX request and emit a different action simultaneously. This is useful when a cancellation event should trigger an alternative side effect, such as incrementing a counter. `take(1)` is used to ensure the cancellation action is only processed once.

```javascript
import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => race(
    ajax.getJSON(`/api/users/${action.payload}`).pipe(
      map(response => fetchUserFulfilled(response))
    ),
    action$.pipe(
      ofType(FETCH_USER_CANCELLED),
      map(() => incrementCounter()),
      take(1)
    )
  ))
);

```

--------------------------------

### Ping Epic using ofType Operator

Source: https://redux-observable.js.org/docs/basics/Epics.html

A more concise version of the Ping Epic using the `ofType` operator provided by redux-observable, which simplifies filtering by action type. Requires importing `ofType`.

```javascript
import { ofType } from 'redux-observable';

const pingEpic = action$ => action$.pipe(
  ofType('PING'),
  delay(1000), // Asynchronously wait 1000ms then continue
  mapTo({ type: 'PONG' })
);

```

--------------------------------

### Fixing 'this' Context in Class Epics

Source: https://redux-observable.js.org/docs/Troubleshooting.html

When organizing epics within a class, using regular class methods can result in 'this' being bound to Window. Use arrow functions for class properties to correctly bind 'this'.

```javascript
class TooFancy {
  constructor(private somethingInjected:SomethingInjected)
  checkAutoLogin =  (action$: Observable<IPayloadAction>) => {
    console.log(this); // You can access somethingInjected
  }
}

```

--------------------------------

### Epic Signature

Source: https://redux-observable.js.org/docs/basics/Epics.html

The signature for an epic function, which receives action and state observables.

```javascript
function (action$: ActionsObservable<Action>, state$: StateObservable<State>): ActionsObservable<Action>;
```

--------------------------------

### Epic Performing Side Effects Without Downstream Actions

Source: https://redux-observable.js.org/docs/Troubleshooting.html

To perform side effects (like logging) in an epic without producing downstream actions, use the 'tap' operator followed by 'ignoreElements'. This ensures the epic returns an empty Observable.

```javascript
import { ofType } from 'redux-observable';
import { map, tap, ignoreElements } from 'rxjs/operators';

const myEpic = action$ => {
  return action$.pipe(
    ofType(...),
    map(...),
    tap(item => console.log(item)),
    ignoreElements()
  );
};

```

--------------------------------

### Accessing State Imperatively (After)

Source: https://redux-observable.js.org/MIGRATION.html

Shows the updated imperative approach using `state$.value` in v1.0.0+ of redux-observable. Requires v6 pipe operators.

```javascript
// Also now using v6 pipe operators
const fetchUserEpic = (action$, state$) =>
  action$.pipe(
    ofType(FETCH_USER),
    mergeMap(action =>
      ajax(`/users/${action.id}`, { 'Authorization': `Bearer ${state$.value.authToken}` })).pipe( // <----- here
        map(response => fetchUserFulfilled(response))
      )
    )
  );
```

--------------------------------

### Using ofType Operator in Redux Observable

Source: https://redux-observable.js.org/CHANGELOG.html

Demonstrates the transition from the older `action$.ofType()` method to the new pipeable `ofType` operator introduced in Redux Observable v2.0.0. This change aligns with RxJS v6+ pipeable operator patterns.

```javascript
// BEFORE
function someEpic(action$) {
  return action$
    .ofType('PING')
    .mapTo({ type: 'PONG' });
}
```

```javascript
// AFTER
import { ofType } from 'redux-observable';
import { mapTo } from 'rxjs/operators';
function someEpic(action$) {
  return action$.pipe(
    ofType('PING')
    mapTo({ type: 'PONG' })
  );
}
```

--------------------------------

### Catching Errors in an Epic with RxJS

Source: https://redux-observable.js.org/docs/recipes/ErrorHandling.html

Use the RxJS `catchError` operator within your Epic to handle errors from asynchronous operations like AJAX calls. This prevents the Epic from terminating and allows you to emit an action containing error details.

```javascript
import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => ajax.getJSON(`/api/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    catchError(error => of({
      type: FETCH_USER_REJECTED,
      payload: error.xhr.response,
      error: true
    }))
  ))
);

```

--------------------------------

### Epic Type Signature

Source: https://redux-observable.js.org/docs/basics/Epics.html

The fundamental type signature of an Epic function, illustrating its input and output streams.

```javascript
function (action$: Observable<Action>, state$: StateObservable<State>): Observable<Action>;
```

--------------------------------

### Synchronous State Access in Epic

Source: https://redux-observable.js.org/docs/basics/Epics.html

Access the current Redux state synchronously within an epic using `state$.value`. This is useful for simple checks before mapping to a new action.

```javascript
const INCREMENT = 'INCREMENT';
const INCREMENT_IF_ODD = 'INCREMENT_IF_ODD';

const increment = () => ({ type: INCREMENT });
const incrementIfOdd = () => ({ type: INCREMENT_IF_ODD });

const incrementIfOddEpic = (action$, state$) => action$.pipe(
  ofType(INCREMENT_IF_ODD),
  filter(() => state$.value.counter % 2 === 1),
  map(() => increment())
);

// later...
dispatch(incrementIfOdd());

```

--------------------------------

### TypeScript: Incorrect Type Narrowing with ofType

Source: https://redux-observable.js.org/docs/Troubleshooting.html

Demonstrates the incorrect type narrowing when using the `ofType` operator without explicit generics. The action type remains as the union type `Actions` instead of the specific type `One`.

```typescript
// This will let action be `Actions` type, which is wrong
const epic = (action$: ActionsObservable<Actions>) =>
  action$.pipe(
    ofType(ActionTypes.One),
    // action is still type Actions instead of One
    map((action) => {...})
  );

```
Tokens:
Raw