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/redux@^3.5.2/dist/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 { createMockStore } = ReduxLogicTest;

const appContainerDiv = document.querySelector('#appContainer');

const fooLogic = createLogic({
  type: 'FOO',
  process({ API, getState, action }, dispatch, done) {
    API.get()
       .then(results => {
         dispatch({ type: 'FOO_SUCCESS', payload: results });
         done();
       });
  }
});

const api = {
  get() { return Promise.resolve(42); }
};

const logic = [fooLogic]; // array of logic to use/test
const injectedDeps = { // include what is needed for logic
  API: api // could include mocked API for easy testing
};

const initialState = {}; // optionally set
const reducer = (state, action) => { return state; }; // optional

const store = createMockStore({
  initialState,
  reducer,
  logic,
  injectedDeps
});

store.dispatch({ type: 'FOO' }); // kick off fetching
store.dispatch({ type: 'BAR' }); // other dispatches
store.whenComplete(() => { // runs this fn when all logic is complete
  console.log('actions', JSON.stringify(store.actions, null, 2));
  appContainerDiv.innerHTML=`
    <h2>store.actions</h2>
    <pre>${JSON.stringify(store.actions, null, 2)}</pre>
  `;
});