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, applyMiddleware } = Redux;
const { ofType, createEpicMiddleware } = ReduxObservable;
const { zip, of } = rxjs;
const { combine, filter, switchMap, delay, mapTo, tap, skipUntil, take } = rxjs.operators;

const epicMiddleware = createEpicMiddleware();

const store = createStore(pingReducer,
  applyMiddleware(epicMiddleware)
);
    
epicMiddleware.run(pingEpic);

/**
 * This is using raw HTML + redux.
 * 
 * You will most likely use some sort of UI framework
 * like React, Angular, etc
 */
const renderApp = () => {
  document.body.innerHTML = `
    <div>
      <input type="checkbox" id="dog">dog
      <input type="checkbox" id="cat">cat
      <button
        onclick="(${() => {
          const API = []
          if (document.getElementById('dog').checked === true) {
            API.push(Other_API)
            store.dispatch(submit(API));
            store.dispatch(otherAPI());
          }
          store.dispatch(submit(API));
        }})();"
      >
        Submit
      </button>
    </div>
  `;
};

store.subscribe(renderApp);
renderApp();

  </script>
</html>

Babel + JSX

const Other_API = 'Other_API';
const SUBMIT = 'SUBMIT';
const DONE = 'DONE'

const ping = () => ({ type: PING });
const pong = () => ({ type: PONG });
const submit = (APIList) => ({ type: SUBMIT, APIList });
const otherAPI = () => ({ type: Other_API });
const done = () => ({ type: DONE });

const pingEpic = action$ => action$.pipe(
  ofType(SUBMIT),
  tap(() => console.log(store.getState().APIList.includes(Other_API))),
  switchMap(() => store.getState().APIList.includes(Other_API)
    ? action$.ofType(Other_API).pipe(
      tap(() => console.log('other API go')),
      take(1)
    )
    : ['done']
  ),
  tap(() => window.alert('done'))
);

const pingReducer = (state = { APIList: [] }, action) => {
  switch (action.type) {
    case 'Other_API':
      return
      
    case 'SUBMIT':
      return { APIList: action.APIList}
      
    case 'DONE':
      return

    default:
      return state;
  }
};