diff --git a/modern/src/Actions.ts b/modern/src/Actions.ts new file mode 100644 index 00000000..4c7bdd0e --- /dev/null +++ b/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 }; +} diff --git a/modern/src/App.js b/modern/src/App.js index 53d6535f..c691721c 100644 --- a/modern/src/App.js +++ b/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) { diff --git a/modern/src/Selectors.ts b/modern/src/Selectors.ts new file mode 100644 index 00000000..48355c5c --- /dev/null +++ b/modern/src/Selectors.ts @@ -0,0 +1,5 @@ +import { ModernAppState, MakiTree } from "./types"; + +export function getMakiTree(state: ModernAppState): MakiTree | null { + return state.makiTree; +} diff --git a/modern/src/store.ts b/modern/src/store.ts index 9c4584e9..8ca72d4d 100644 --- a/modern/src/store.ts +++ b/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; } diff --git a/modern/src/types.ts b/modern/src/types.ts index 6eb3f2dd..cd3159b4 100644 --- a/modern/src/types.ts +++ b/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 };