Update reducer for set unit cell, need to fix infinite loop

frontend/src/actions.js

@@ -1,12 +1,6 @@
-export const ADD_QUBIT = 'ADD_QUBIT';
-export const REMOVE_QUBIT = 'REMOVE_QUBIT';
+export const SET_UNIT_CELL = 'SET_UNIT_CELL';
 
-export const addQubit = (qubit) => ({
-  type: ADD_QUBIT,
-  payload: qubit,
-});
-
-export const remoteQubit = (qubit) => ({
-  type: REMOVE_QUBIT,
-  payload: qubit,
+export const setUnitCell = (unitCell) => ({
+  type: SET_UNIT_CELL,
+  payload: unitCell,
 });

frontend/src/control-flow.js

@@ -12,7 +12,6 @@ import QubitLattice from './qubits/QubitLattice';
 import Button from './components/Button';
 import DownloadButton from './components/download/DownloadButton';
 import store from './store';
-import { addQubit } from './actions';
 
 /**
  * Defines how the app behaves (button and feature placement) upon initialization
@@ -25,7 +24,8 @@ export default function InitializeControlFlow() {
   const workspace = new Container();
   workspace.name = 'workspace';
   const grid = new Grid(gridSize, workspace, app);
-
+  // Add qubits from redux store
+  // const storedUnitCell = store.getState().unitCell;
   workspace.addChild(grid);
   grid.units.forEach((row) => {
     row.forEach((unit) => {
@@ -143,10 +143,17 @@ export default function InitializeControlFlow() {
           });
         });
 
+        // Commit unit cell to redux store
+        store.dispatch({
+          type: 'SET_UNIT_CELL',
+          payload: {
+            qubits: lattice.constellation,
+            gridSquares: grid.visibleUnits()
+          },
+        });
+
         // Add qubits to the workspace
-        // eslint-disable-next-line max-len
         for (let horiz = 0; horiz < app.renderer.width; horiz += grid.physicalWidth) {
-          // eslint-disable-next-line max-len
           for (let vertic = 0; vertic < app.renderer.height; vertic += grid.physicalHeight) {
             for (const qubit of lattice.constellation) {
               const newQubit = new Qubit(
@@ -156,8 +163,6 @@ export default function InitializeControlFlow() {
                 workspace.gridSize
               );
               workspace.addChild(newQubit);
-              // Add qubit to redux store
-              store.dispatch(addQubit(newQubit.serialized()));
             }
           }
         }

frontend/src/reducers.js

@@ -1,29 +1,25 @@
 /* eslint-disable default-param-last */
-// reducers/workspaceReducer.js
-import { ADD_QUBIT, REMOVE_QUBIT } from './actions';
+import { SET_UNIT_CELL } from './actions';
 
-const initialState = {
-  qubits: [],
-  plaquettes: [],
+export const initialState = {
+  untiCell: {
+    qubits: [],
+    gridSquares: [],
+  },
 };
 
-const workspaceReducer = (state = initialState, action) => {
+const rootReducer = (state = initialState, action) => {
   switch (action.type) {
-  case ADD_QUBIT:
-    state.qubits.push(action.payload);
-    return state;
-  case REMOVE_QUBIT:
-    state.qubits.forEach((qubit, index) => {
-      if (qubit === action.payload) {
-        state.qubits.splice(index, 1);
+  case SET_UNIT_CELL:
+    return {
+      unitCell: {
+        qubits: action.payload.qubits,
+        gridSquares: action.payload.gridSquares,
       }
-    });
-    return state;
+    };
   default:
     return state;
   }
 };
 
-const rootReducer = workspaceReducer;
-
 export default rootReducer;

frontend/src/store.js

@@ -1,10 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from './reducers';
 
-export const initialState = {
-  qubits: [],
-};
-
 // Load state from localStorage
 const loadState = () => {
   try {