add second VCO and more state

src/app/store.js

@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
-import timbreReducer from '../features/timbre/timbreSlice';
+import parameterReducer from '../features/timbre/parameters/parameterSlice';
 
 export default configureStore({
     reducer: {
         counter: counterReducer,
-        timbre: timbreReducer,
+        parameters: parameterReducer,
     },
 });

src/features/timbre/Timbre.js

@@ -2,5 +2,10 @@ import React from 'react';
 import VCO from './parameters/VCO';
 
 export function Timbre(props) {
-    return <VCO id="vco1" />;
+    return (
+        <div>
+            <VCO id="vco1" />
+            <VCO id="vco2" />
+        </div>
+    );
 }

src/features/timbre/parameters/VCO.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { selectById, parameterUpdated } from '../timbreSlice.js';
+import { selectById, parameterUpdated } from './parameterSlice.js';
 
 export default function VCO(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
@@ -14,7 +14,7 @@ export default function VCO(props) {
                 onClick={() =>
                     dispatch(
                         parameterUpdated({
-                            id: 'vco1',
+                            id: props.id,
                             changes: { waveform: 'Triangle' },
                         })
                     )
@@ -22,17 +22,17 @@ export default function VCO(props) {
                 {' '}
                 Set Waveform to Triangle{' '}
             </button>
-            <span>Current Mod Value {parameters.mod} </span>
+            <span>Current Mod Value {parameters.waveMod} </span>
             <input
                 type="range"
                 min="0"
                 max="100"
-                value={parameters.mod}
+                value={parameters.waveMod}
                 onChange={(e) =>
                     dispatch(
                         parameterUpdated({
-                            id: 'vco1',
+                            id: props.id,
-                            changes: { mod: e.target.value },
+                            changes: { waveMod: e.target.value },
                         })
                     )
                 }

src/features/timbre/parameters/parameterSlice.js

@@ -0,0 +1,80 @@
+import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
+
+const parametersAdapter = createEntityAdapter({});
+
+const parametersSlice = createSlice({
+    name: 'parameters',
+    initialState: parametersAdapter.getInitialState({
+        ids: [
+            'vco1',
+            'vco2',
+            'mixer1',
+            'timbre1',
+            'filter1',
+            'eg1',
+            'amp1',
+            'eg2',
+            'lfo1',
+            'lfo2',
+            'patches1',
+        ],
+        entities: {
+            'vco1': {
+                id: 'vco1',
+                waveform: 'Saw',
+                dwgsOrModType: 0,
+                waveMod: 0,
+                lfoMod: 0,
+            },
+            'vco2': {
+                id: 'vco2',
+                waveform: 'Saw',
+                dwgsOrModType: 0,
+                waveMod: 0,
+                lfoMod: 0,
+            },
+            'mixer1': {
+                id: 'mixer1',
+                vol1: 127,
+                vol2: 0,
+                vol3: 0,
+            },
+            'timbre1': {
+                id: 'timbre1',
+            },
+            'filter1': {
+                id: 'filter1',
+            },
+            'eg1': {
+                id: 'eg1',
+            },
+            'amp1': {
+                id: 'amp1',
+            },
+            'eg2': {
+                id: 'eg2',
+            },
+            'lfo1': {
+                id: 'lfo1',
+            },
+            'lfo2': {
+                id: 'lfo2',
+            },
+        },
+    }),
+    reducers: {
+        parameterAdded: parametersAdapter.addOne,
+        parameterUpdated: parametersAdapter.updateOne,
+    },
+});
+
+export const {
+    selectById,
+    selectAll,
+    selectEntities,
+    selectIds,
+} = parametersAdapter.getSelectors((state) => state.parameters);
+
+export const { parameterAdded, parameterUpdated } = parametersSlice.actions;
+
+export default parametersSlice.reducer;

src/features/timbre/timbreSlice.js

@@ -1,32 +0,0 @@
-import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
-
-const timbreAdapter = createEntityAdapter({});
-
-const timbreSlice = createSlice({
-    name: 'timbre',
-    initialState: timbreAdapter.getInitialState({
-        ids: ['vco1'],
-        entities: {
-            vco1: {
-                id: 'vco1',
-                waveform: 'Saw',
-                mod: 0,
-            },
-        },
-    }),
-    reducers: {
-        parameterAdded: timbreAdapter.addOne,
-        parameterUpdated: timbreAdapter.updateOne,
-    },
-});
-
-export const {
-    selectById,
-    selectAll,
-    selectEntities,
-    selectIds,
-} = timbreAdapter.getSelectors((state) => state.timbre);
-
-export const { parameterAdded, parameterUpdated } = timbreSlice.actions;
-
-export default timbreSlice.reducer;