1 files changed, 22 insertions, 1 deletions

diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 452448c..37daaa6 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -2,6 +2,7 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
+import { applyPatch, applySnapshot } from 'mobx-state-tree';
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
@@ -10,6 +11,26 @@ import {
 } from '@mui/material/styles';
 import React from 'react';
 import { render } from 'react-dom';
+import { sharedStore } from '@sophie/shared';
+
+import { exposeToReduxDevtools } from './devTools';
+
+const isDevelopment = import.meta.env.MODE === 'development';
+
+const store = sharedStore.create();
+
+if (isDevelopment) {
+  exposeToReduxDevtools(store);
+}
+
+window.sophieRenderer.setSharedStoreListener({
+  onSnapshot(snapshot) {
+    applySnapshot(store, snapshot);
+  },
+  onPatch(patch) {
+    applyPatch(store, patch);
+  },
+});
 
 const theme = createTheme({
   palette: {
@@ -24,7 +45,7 @@ function App() {
         <CssBaseline enableColorScheme />
         <Button
           variant="contained"
-          onClick={window.sophieRenderer.buttonClicked}
+          onClick={window.sophieRenderer.buttonClick}
         >
           Hello Sophie!
         </Button>