SpaceAce-customActions.jsx

import { fetchPizza } from '../apiCalls';

/* 
  handleSubmit is a custom action.
  The first parameter is provided by SpaceAce.
  The remaining parameters are passed-through
  which in this case consists of React's event object
*/
const handleSubmit = async ({ space, merge }, event) => {
  event.preventDefault();
  
  // merge does a shallow merge, allowing the assignment of multiple properties at once
  merge({ saving: true }); // updates space immediately, triggers re-render
  
  const { data, error } = await fetchPizza({ name: space.name });
  if (error) return merge({ error: errorMsg, saving: false });
  
  merge({ 
    saving: false, 
    pizza: data.pizza // 'Pepperoni', hopefully
  });
};

/*
  handleReset is another custom action.
  This one erases all properties on the space,
  replacing them with only the specified ones.
*/
const handleReset = ({ replace }) => {
  replace({
    name: '',
    pizzaLover: false
  });
};

export const PizzaForm = ({ space }) => (
  <form onSubmit={space(handleSubmit)}>
    {/* ... some input elements */}
    <p className="error">{space.errorMsg}</p>
    {space.pizza && <p>You’ve been given: {space.pizza}</p>}
    <button disabled={space.saving} type="submit">Get Pizza</button>
    <button disabled={space.saving} type="button" onClick={space(handleReset)}>Reset</button>
  </form>
);