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/axios/dist/axios.min.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/redux-logic@0.11.1/dist/redux-logic.min.js"></script>
<script src="https://unpkg.com/redux-logic-test@1.0.0/dist/redux-logic-test.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

const { createLogic } = ReduxLogic;
const { connect, Provider } = ReactRedux;
const { createMockStore } = ReduxLogicTest;


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

const NPM_SEARCH = 'NPM_SEARCH';
const NPM_SEARCH_FULFILLED = 'NPM_SEARCH_FULFILLED';
const NPM_SEARCH_REJECTED = 'NPM_SEARCH_REJECTED';
function npmSearch(ev) {
  return { type: NPM_SEARCH, payload: ev.target.value };
}

const npmSearchLogic = createLogic({
  type: NPM_SEARCH,
  debounce: 500, // ms
  latest: true, // take latest only

  validate({ getState, action }, allow, reject) {
    if (action.payload) {
      allow(action);
    } else { // empty request, silently reject
      reject();
    }
  },

  // use axios injected as httpClient from configureStore logic deps
  process({ httpClient, getState, action }, dispatch, done) {
    httpClient.get(`https://npmsearch.com/query?q=${action.payload}&fields=name,description`)
      .then(resp => resp.data.results) // use results prop of payload
      .then(results => dispatch({
        type: NPM_SEARCH_FULFILLED,
        payload: results
      }))
      .catch(err => {
        console.error(err); // log since could be render err
        dispatch({
          type: NPM_SEARCH_REJECTED,
          payload: err,
          error: true
        });
      })
      .then(() => done()); // call done when finished dispatching
  }
});

const deps = { // injected dependencies for logic
  httpClient: axios
};
const arrLogic = [npmSearchLogic];
                          
const store = createMockStore({
  initialState,
  reducer,
  logic: arrLogic,
  injectedDeps: deps
});   

// Let's just log the store.actions each time store updates
// and we'll clear it out after done logging
store.subscribe(() => {
  store.actions.forEach(x => console.log('action', x));
  store.resetActions();
});                          

const ConnectedApp = connect(
  state => ({
    results: state.list,
    fetchStatus: state.fetchStatus
  }),
  {
    npmSearch
 ...