React with Redux-Observable example

by superj80820

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/redux@4/dist/redux.min.js"></script>
  <script src="https://unpkg.com/rxjs@6/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/redux-observable@1/dist/redux-observable.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/redux-thunk.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
</body>
</html>

JavaScript

const {
    createStore,
    compose,
    applyMiddleware
} = Redux;
const {
    ofType,
    createEpicMiddleware
} = ReduxObservable;
const {
    switchMap,
    mapTo,
    tap,
    take
} = rxjs.operators;

/* Action */
const submit = APIList => ({
    type: 'SUBMIT',
    APIList
});
const done = () => ({
    type: 'DONE'
});
const callAPI = API => dispatch => mockAPI().then(() => dispatch({
    type: API
}))

/* Reducer */
const APIReducer = (state = {
    APIList: []
}, action) => {
    switch (action.type) {
        case 'A_API':
            return state

        case 'B_API':
            return state

        case 'SUBMIT':
            return {
                APIList: action.APIList
            }

            case 'DONE':
                return state

            default:
                return state;
    }
};

/* Redux-Observable Epic */
const submitEpic = action$ => action$.pipe(
    ofType('SUBMIT'),
    switchMap(() => store.getState().APIList.includes('A_API') ?
        action$.ofType('A_API').pipe(
            tap(() => console.log('I am A API')),
            take(1)
        ) :
        ['pass']
    ),
    switchMap(() => store.getState().APIList.includes('B_API') ?
        action$.ofType('B_API').pipe(
            tap(() => console.log('I am B API')),
            take(1)
        ) :
        ['pass']
    ),
    tap(() => {
        window.alert('done')
    }),
    mapTo(done())
);

/* Init Redux */
const thunkMiddleware = window.ReduxThunk.default;
const epicMiddleware = createEpicMiddleware();

const store = createStore(
    APIReducer,
    applyMiddleware(...[thunkMiddleware, epicMiddleware])
);
epicMiddleware.run(submitEpic);

/* Init React */
const renderApp = () => {
    document.body.innerHTML = `
    <div>
      <input type="checkbox" id="A_API">A_API
      <input type="checkbox" id="B_API">B_API
      <button
        onclick="(${() => {
          const APIs = [];
          if (document.getElementById('A_API').checked === true) {
           ...