JSFiddle - React, Tailwind, and code Playground

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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
</body>
  <script>

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

const epicMiddleware = createEpicMiddleware();

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

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) {
            APIs.push('A_API')
          }
          if (document.getElementById('B_API').checked === true) {
            APIs.push('B_API')
          }
          store.dispatch(submit(APIs))
          APIs.forEach(API => {
            APIAction(API)
          })
        }})();"
      >
        Submit
      </button>
    </div>
  `;
};

store.subscribe(renderApp);
renderApp();

  </script>
</html>

Babel + JSX

const submit = APIList => ({ type: 'SUBMIT', APIList });
const done = () => ({ type: 'DONE' });

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())
);

const APIAction = API => {
  mockAPI()
  .then(() => store.dispatch({type: API}))
}


// ****** not important ******
function mockAPI() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('API ok')
      resolve('API ok')
    }, 3000)
  })
}

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;
  }
};