rosschapman

let isValid = (data) => {...}

let submitEntityForm = (data) => {
  if (!isValid(data)) {
    // add error notification...
  };
  
  dispatch('SUBMIT_ENTITY_FORM', data);
}

rosschapman

let submitEntityForm = (data) => {
  dispatch('SUBMIT_ENTITY_FORM', data);
}

let MyFormComponent = () => {
    return {
        <Form>
            <Button type={'submit'} onClick={submitEntityForm}/>
        </Form>
    }

rosschapman

UCM React Basic Example
  IDLE
    input -> ACTIVE
  ACTIVE
    submit -> WAITING
    blur -> IDLE
  WAITING
    invalid -> FORM_INVALID
    resolve -> SUCCESS
    reject -> HAS_ERROR

rosschapman

describe('when editing an entity', () => {
    it('posts the entity form and does all the right stuff afterward', () => {
        stub(myModule, 'prePopulateForm');
        dispatch = jest.fn();

        postEntityForm();

        expect(dispatch).toHaveBeenCalledTimes(6);
        expect(prePopulateForm).toHaveBeenCalledTimes(1)
    });

rosschapman

// This is oversimplified. The real code for this callback would be a complicated graph  
// of nested asynchronous and synchronous calls. Imagine at the edge of thes thunks each 
// dispatched action mutates state.
let postEntityForm = (e, data) => {
    await dispatch(saveEntity(data));
    let entities = await dispatch(fetchEntities());
    let taxPolicy = await dispatch(maybeFetchEntityTaxPolicy());
    await dispatch(maybeUpdateEntityPriceSuggestions(taxPolicy, entities));
    let isEditing = dispatch(getIsEditingFromState());

rosschapman

handleCampaignClick = (campaign, actionName) => {
    if (actionName === 'activate') {
        const campaigns = this.props.campaigns;
        const hasNoActivated = !campaigns.some(c => c.activated);
        
        if (hasNoActivated) {
            updateCampaignAndUpdateFeaturedCampaigns({
                id: campaign.id,
                activated: true
            });

rosschapman

handleCampaignClick = (campaign, actionName) => {
    if (actionName === 'activate') {
        const campaigns = this.props.campaigns;
        const hasNoActivated = !campaigns.some(c => c.activated);
        
        if (hasNoActivated) {
            updateCampaign({
                id: campaign.id,
                value: true
            });

rosschapman

handleCampaignClick = (campaign, actionName) => {
    if (actionName === 'activate') {
        updateCampaign({
            id: campaign.id,
            value: true,
        });
    }

    if (actionName === 'makeFeatured') {
        updateFeaturedCampaigns({

rosschapman

export const saveStuffThunk = async (formData) => {
  async(dispatch, getState) => {
    try {
      await saveParentEntity(getParentEntityFromForm(formData));
    } catch (e) {
      throw SubmissionError(e);
    }

    try {
      await saveChildEntity(getChildEntityFromForm(formData));

rosschapman

import InventoryManagementView from '../components/InventoryManagementView'
import {eventIsSellable} from '../selectors/event';

const userCanSellEvent = eventIsSellable(this.props.event);

if (userCanSellEvent) {
  return InventoryManagementView;
}