Add the first redux action to the modern skin codebase

modern/src/Actions.ts

@@ -0,0 +1,5 @@
+import { MakiTree, ModernAction } from "./types";
+
+export function setMakiTree(makiTree: MakiTree): ModernAction {
+  return { type: "SET_MAKI_TREE", makiTree };
+}

modern/src/App.js

@@ -6,8 +6,11 @@ import initialize from "./initialize";
 import System from "./runtime/System";
 import runtime from "./runtime";
 import { run } from "./maki-interpreter/virtualMachine";
+import * as Actions from "./Actions";
+import * as Selectors from "./Selectors";
 // import simpleSkin from "../skins/simple.wal";
 import cornerSkin from "../skins/CornerAmp_Redux.wal";
+import { useDispatch, useSelector } from "react-redux";
 
 async function getSkin() {
   const resp = await fetch(cornerSkin);
@@ -337,7 +340,8 @@ function XmlNode({ node }) {
 }
 
 function App() {
-  const [data, setData] = React.useState(null);
+  const dispatch = useDispatch();
+  const data = useSelector(Selectors.getMakiTree);
   React.useEffect(() => {
     getSkin().then(async root => {
       // Execute scripts
@@ -372,7 +376,7 @@ function App() {
         }
       });
 
-      setData(root);
+      dispatch(Actions.setMakiTree(root));
     });
   }, []);
   if (data == null) {

modern/src/Selectors.ts

@@ -0,0 +1,5 @@
+import { ModernAppState, MakiTree } from "./types";
+
+export function getMakiTree(state: ModernAppState): MakiTree | null {
+  return state.makiTree;
+}

modern/src/store.ts

@@ -1,13 +1,15 @@
 import { ModernAppState, ModernAction } from "./types";
 import { createStore } from "redux";
 
-const defaultState = {};
+const defaultState = { makiTree: null };
 
 function reducer(
   state: ModernAppState = defaultState,
   action: ModernAction
 ): ModernAppState {
   switch (action.type) {
+    case "SET_MAKI_TREE":
+      return { ...state, makiTree: action.makiTree };
     default:
       return state;
   }

modern/src/types.ts

@@ -1,2 +1,7 @@
-export type ModernAppState = {};
-export type ModernAction = { type: "INIT" };
+// TODO: Type the state tree
+export type MakiTree = any;
+
+export type ModernAppState = {
+  makiTree: MakiTree | null;
+};
+export type ModernAction = { type: "SET_MAKI_TREE"; makiTree: MakiTree };