Setting Up The Middleware

Now that we know what Epics are, we need to provide them to the redux-observable middleware so they can start listening for actions.

Root Epic

Just like redux requiring a single root Reducer, redux-observable also requires you to have a single root Epic. As we learned previously, we can use combineEpics() to accomplish this.

One common pattern is to import all your Epics into a single file, which then exports the root Epic, along with your root Reducer.


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

export const rootEpic = combineEpics(

export const rootReducer = combineReducers({

This pattern is an extension of the Ducks Modular Redux pattern.

Configuring The Store

Now you'll want to create an instance of the redux-observable middleware, passing along our newly created root Epic.

import { createEpicMiddleware } from 'redux-observable';
import { rootEpic } from './modules/root';

const epicMiddleware = createEpicMiddleware(rootEpic);

When you put that together with your existing Store configuration, it will look something like this:


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

const epicMiddleware = createEpicMiddleware(rootEpic);

export default function configureStore() {
  const store = createStore(

  return store;

Redux DevTools

To enable Redux DevTools Extension, just use window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ or import redux-devtools-extension npm package.

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(pingReducer,

results matching ""

    No results matching ""