Introduction to Redux Observable

configureStore.js

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

const epicMiddleware = createEpicMiddleware(rootEpic);

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


  return store;
}

list-module.js

import { baseUrl } from '../environment';
import { combineEpics } from 'redux-observable';
import { ajax } from 'rxjs/observable/dom/ajax';
// modules/list/index.js

// Actions
const FETCH_LIST   = 'my-app/module/FETCH_LIST';
const FETCH_LIST_SUCCESS = 'my-app/module/FETCH_LIST_SUCCESS';
const FETCH_LIST_ERROR = 'my-app/module/FETCH_ERROR';

// Reducer
const InitialState = {
 fetching: false;
 list: [ ],
};


export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// Action Creators
export function fetchList() {
  return { 
    type: FETCH_LIST
    };
}

export function fetchListSuccess(list) {
  return { 
    type: FETCHING_LIST_SUCCESS,
    payload: { list }
  };
}

export function fetchListError(error) {
  return { 
    type: FETCH_LIST_ERROR,
    payload: error,
 };
}


// Epic
const fetchListEpic = action$ => {
 action$.ofType(FETCH_LIST_SUCCESS)
    .mergeMap(action =>
      ajax.getJSON(`${baseurl}/list`)
        .map(res => fetchListSuccess(res.data))
    );
}; 

// When you have many epics you might want to combine them like this
export const combineEpics(
  fetchListEpic,
 // Some other epics ...
);

modules.js

import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import list, { fetchListEpic } from './lists';

export const rootEpic = combineEpics(
  fetchUserEpic,
  // ...
);

export const rootReducer = combineReducers({
  // ...
  list,
});