puzzfuzz

// Rigging.js

class Rigging {
  /* ... */
  cartUpdated = (newCart) => {
    this.dispatch(cartActions.cartUpdated(newCart));
  };
}

puzzfuzz

// RiggingApp.js

class RiggingApp {
  constructor({ componentClass, mountSites }) { /*...*/ }
  setStore(store) { 
    // scope a reference of the store to pass to app instances
    this.store = store; 
  }
  
  init() { /* forEach mountsite: _initMountSite */ }

puzzfuzz

// CartController.jsx
@CartContainer
export default class CartController extends Component {
  static propTypes = {
    cart: PropTypes.object.isRequired,
    adjustQuantity: PropTypes.func.isRequired
  };
  
  render() {
    const { cart, adjustQuantity } = this.props;

puzzfuzz

const store = createStore(/* ... */);

// ...

ReactDOM.render(
  <Provider store={store}>
    <MyCompA />
  </Provider>,
  document.getElementById('mountsite-A')
);

puzzfuzz

/** src/reducers/cart.js **/

const initialState = {
  ...window.shopifyData.cart, // Rehydrate cart state from server data
  isUpdating: false
};

const cart = (state = initialState, action) => { // Bootstrap initial state
  switch (action.type) {
    case 'CART_IS_UPDATING': {

puzzfuzz

<!-- snippets/_data-cart.liquid -->
<script type="text/javascript">
  window.shopifyData = window.shopifyData || {};
  window.shopifyData.cart = {{ cart | json }};
</script>

<!-- snippets/_data-product.liquid -->
<script type="text/javascript">
  window.shopifyData = window.shopifyData || {};
  window.shopifyData.currentProduct = {{ product | json }};

puzzfuzz

{
  "env": {
    "es6": true,
    "browser": true
  },
  "ecmaFeatures": {
    "modules": true,
    "jsx": true
  }
}