implement test VCO redux state and actions

src/App.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import logo from './logo.svg';
 import { Counter } from './features/counter/Counter';
+import { Timbre } from './features/timbre/Timbre';
 import './App.css';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-      </header>
-    </div>
-  );
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <Counter />
+                <Timbre />
+            </header>
+        </div>
+    );
 }
 
 export default App;

src/app/store.js

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

src/features/timbre/Timbre.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import VCO from './parameters/VCO';
+
+export function Timbre(props) {
+    return <VCO id="vco1" />;
+}

src/features/timbre/parameters/VCO.js

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

src/features/timbre/timbreSlice.js

@@ -0,0 +1,32 @@
+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;