React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by jeffbski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://npmcdn.com/redux@^3.5.2/dist/redux.min.js"></script>
<script src="https://npmcdn.com/react-redux@^4.4.5/dist/react-redux.min.js"></script>
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<script src="https://unpkg.com/[email protected]/dist/redux-logic.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

const { createStore, applyMiddleware } = Redux;
const { createLogic, createLogicMiddleware } = ReduxLogic;
const { connect, Provider } = ReactRedux;
const { ajax } = Rx.Observable;

const initialState = {
  list: [],
  fetchStatus: ''
};

const USERS_FETCH = 'USERS_FETCH';
const USERS_FETCH_CANCEL = 'USERS_FETCH_CANCEL';
const USERS_FETCH_FULFILLED = 'USERS_FETCH_FULFILLED';
const USERS_FETCH_REJECTED = 'USERS_FETCH_REJECTED';
function usersFetch() { return { type: USERS_FETCH }; }
function usersFetchCancel() { return { type: USERS_FETCH_CANCEL }; }

const delay = 2; // 2s delay for interactive use of cancel/take latest
const usersFetchLogic = createLogic({
  type: USERS_FETCH,
  cancelType: USERS_FETCH_CANCEL,
  latest: true, // take latest only

  processOptions: {
    dispatchReturn: true,  // dispatch the values from returned obs
    successType: USERS_FETCH_FULFILLED, // apply this action type
    failType: USERS_FETCH_REJECTED // apply this action type on err
  },

  process({ getState, action }) {
    // dispatch the values from this returned observable
    // cancel and take latest will abort in-flight xhr requests
    // the delay query param adds arbitrary delay to the response
    return ajax.getJSON(`https://reqres.in/api/users?delay=${delay}`)
      .map(payload => payload.data); // use data property of payload        
  }
});

const deps = { // injected dependencies for logic
};
const arrLogic = [usersFetchLogic];
const logicMiddleware = createLogicMiddleware(arrLogic, deps);
const store = createStore(reducer, initialState,
                          applyMiddleware(logicMiddleware));

const ConnectedApp = connect(
  state => ({
    users: state.list,
    fetchStatus: state.fetchStatus
  }),
  {
    usersFetch,
    usersFetchCancel
  }
)(App);

function App({ users, fetchStatus, usersFetch, usersFetchCancel }) {
  return (
    <div>
      <div>Note: response is artificially delayed to allow interactive cancelling</div>
      <div>Status: {...