index.js

import React from "react";
import { render } from "react-dom";
import createStore from "picostate";
import { Picostate, connect } from "@picostate/react";

import Nav from "./Nav.js";

const data = window.__hydrate__ || {
  page: {
    title: "Home Page"
  },
  data: {
    fields: {
      name: "Eric"
    }
  }
};
const store = createStore(data);

function App(props) {
  return (
    <>
      <Nav />

      <h1>Hello, {props.fields.name}!</h1>
    </>
  );
}

const WrappedApp = connect(state => {
  return {
    fields: state.data.fields
  };
})(App);

render(
  <Picostate store={store}>
    <WrappedApp />
  </Picostate>,
  document.getElementById("root")
);

// new Promise(resolve => {
//   fetchJson().then(json => {
//     resolve(json ? createStore(json) : createStore(localStorage.getItem('foo')))
//   })
// }).then(store => {

// })

Nav.js

import React from 'react';
import { connect } from '@picostate/react';

export default connect(state => {
  return {
    title: state.page.title,
  }
})(function Nav(props) {
  return (
    <nav>
      <button>Back</button>

      <h1>props.title</h1>
    </nav>
  )
});