index.js

import { subscribe } from 'spaceace';

import { renderApp } from './renderApp';
import { rootSpace } from './rootSpace';
          
renderApp(rootSpace);

subscribe(rootSpace, ({ newSpace }) => {
  // executed whenever rootSpace is updated
  // rootSpace is immutable, newSpace is the updated version
  // newSpace !== rootSpace
  renderApp(newSpace);
});

renderApp.js

import React from 'react';
import { render } from 'react-dom';

import { SlideApp } from './components/slideApp.jsx';

export const renderApp = rootSpace => {
  render(
    document.getElementById('slide-app'), 
    <SlideApp space={rootSpace} />
  );
};

rootspace.js

import { createSpace } from 'spaceace';

export const rootSpace = createSpace({
    title: "SpaceAce demo",
    presenter: { name: 'Jon', email: 'jon@jonabrams.com' },
    date: "2018-11-15",
    slides: [
      { title: "SpaceAce", body: "A new take on state management", id: 'abc' },
      { title: "Features!", body: "Immutable, simple, compatible", id: '123' }
    ]
});

console.log(`Name of the presentation: ${rootSpace.title}`);

slide-immediate.jsx

import React from 'react';

export class Slide = ({ space }) => {
  return (
    <div>
      <label>
        Title: <input onClick={event => handleTitleChange(event, space)} />
      </label>
      {/* more to come */}
    </div>
  );
};

const handleTitleChange = (event, space) => 
  space({ title: event.target.value }, 'titleChange');

slide-quick.jsx

import React from 'react';

export class Slide = ({ space }) => {
  return (
    <div>
      <label>
        Title: <input onClick={space('title')} />
      </label>
    </div>
  );
};

slide.jsx

import React from 'react';

export class Slide = ({ space }) => {
  return (
    <div>
      <label>
        Title: <input onClick={space('title')} />
      </label>
      <button onClick={space(saveSlide)} disabled={space.saving}>Save</button>
    </div>
  );
};

const saveSlide = async ({ merge, space }, event) => {
  event.preventDefault();
  merge({ saving: true });
  const result = await fetch(saveUrl, { 
    method: 'post', 
    body: JSON.stringify({ title: space.title })
  }).then(res => res.json());
  merge({ saving: false, error: result.error });  
};

slideApp.jsx

import React from 'react';
import { Slide } from './slide.jsx';

export class SlideApp = ({ space }) => {
  return (
    <div>
      <h1>{space.title}</h1>
      
      {space.slides.map(slide =>
        <Slide key={slide.id} space={slide} />
      )}
    </div>
  );
};