Adding Redux for state management

web/package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

web/src/App.js

@@ -3,6 +3,8 @@ import './App.css';
 import APIBackend from "./apiBackend";
 import StreamingBackend from "./streamingBackend";
 import CapacitorClient from "./client";
+import { createStore } from 'redux'
+import { rootReducer } from './redux';
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -11,10 +13,13 @@ function App() {
     }
   );
 
+  const store = createStore(rootReducer);
+  store.subscribe(() => console.log(store.getState()))
+
   return (
     <>
-    <APIBackend capacitorClient={capacitorClient}/>
-    <StreamingBackend capacitorClient={capacitorClient}/>
+    <APIBackend capacitorClient={capacitorClient} store={store}/>
+    <StreamingBackend capacitorClient={capacitorClient} store={store}/>
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />

web/src/apiBackend.js

@@ -1,10 +1,18 @@
 import { Component } from 'react';
+import {
+  ACTION_FLUX_STATE_RECEIVED,
+} from "./redux";
 
 export default class APIBackend extends Component {
 
   componentDidMount() {
     this.props.capacitorClient.getFluxState()
-      .then(data => console.log(data), () => {/* Generic error handler deals with it */ });
+      .then(
+        data => this.props.store.dispatch(
+          {type: ACTION_FLUX_STATE_RECEIVED, payload: data}
+        ),
+        () => {/* Generic error handler deals with it */ }
+      );
   }
 
   render() {

web/src/redux.js

@@ -0,0 +1,20 @@
+export const initialState = {
+  fluxState: {}
+}
+
+export const ACTION_FLUX_STATE_RECEIVED = 'ACTION_FLUX_STATE_RECEIVED';
+
+export function rootReducer(state = initialState, action) {
+  switch (action.type) {
+    case ACTION_FLUX_STATE_RECEIVED:
+      return fluxStateReceived(state, action.payload)
+    default:
+      console.log('Could not process redux event: ' + JSON.stringify(action));
+      return state;
+  }
+}
+
+function fluxStateReceived(state, payload) {
+  state.fluxState = payload
+  return state
+}

web/src/streamingBackend.js

@@ -48,7 +48,7 @@ export default class StreamingBackend extends Component {
   onMessage = (evt) => {
     evt.data.split('\n').forEach((line) => {
       const message = JSON.parse(line);
-      console.log(message)
+      this.props.store.dispatch(message);
     });
   }
 }