Demo

https://u4bi-store.github.io/pure-redux-observable

USE

API

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

var createStore          = Redux.createStore,
    applyMiddleware      = Redux.applyMiddleware,
    createEpicMiddleware = ReduxObservable.createEpicMiddleware;

Actions

var GET_BOARDS         = '[Boards] GetBoards',
    GET_BOARDS_SUCCESS = '[Boards] GetBoardsSuccess';

var GetBoards        = () => ({ type : GET_BOARDS }),
    GetBoardsSuccess = (boards) => {
        console.log('GetBoardsSuccess', boards);
        return ({ type : GET_BOARDS_SUCCESS, ...boards })
    };

Epic

var API_URL = 'https://cdn.rawgit.com/u4bi/pure-redux-observable/master/model/data.json';

var getBoards = (action$) => action$.pipe(
                                ReduxObservable.ofType(GET_BOARDS),
                                rxjs.operators.delay(1000),
                                rxjs.operators.mergeMap(action => rxjs.ajax.ajax.getJSON('https://cdn.rawgit.com/u4bi/pure-redux-observable/master/model/data.json')),
                                rxjs.operators.map(v => {
                                    console.log('epic then', v);
                                    return GetBoardsSuccess(v)
                                })
                            );

Reducer

var initialState = {
        pending: false,
        boards : []
    },
    newState = (state, newData) => Object.assign({}, state, newData);

var boardsReducer = (state = initialState, action) => {
    console.log('action', action);

    switch (action.type) {
        case GET_BOARDS:
            return newState(state, { pending: true });
        case GET_BOARDS_SUCCESS:
            return newState(state, { pending: false, boards : action.boards });
        default : state;
    }
};

App

var epic = createEpicMiddleware(),
    store   = createStore(boardsReducer, applyMiddleware(epic)),
    element = document.getElementById('app');

store.subscribe( () => {
    let data = store.getState();
    console.log('Subscribe then\n\n', data, '\n\n');

    /*------- View Rendering ---------------------------------------------*/
    data.pending ? element.innerHTML = '<h1>Loading</h1>' : [
        element.innerHTML = '',
        data.boards.reduce((elem, v) => {
            let childrenElement = document.createElement('div');
            childrenElement.className = 'item'
            childrenElement.innerHTML = `
                <h1>${ v.title }</h1>
                <h4>${ v.id }</h4>
                <h4>${ v.writer }</h4>
                <h4>${ v.content}</h4>
            `;

            elem.appendChild(childrenElement);
            
            return elem;
        }, element)
    ];
    /*--------------------------------------------------------------------*/

});

epic.run(getBoards), // multiple ? ReduxObservable.combineEpics(getBoards, getBoards)

store.dispatch(GetBoards());

Requirements

Library	URL
Redux	https://redux.js.org
RxJS	http://reactivex.io/rxjs
redux-observable	https://redux-observable.js.org

---

More ...

https://github.com/u4bi-git/ngrx-crud-side-effect-GraphQL-and-RESTful