diff --git a/src/App.js b/src/App.js index adc228f..ae8c435 100644 --- a/src/App.js +++ b/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 ( -
-
- logo - -
-
- ); + return ( +
+
+ logo + + +
+
+ ); } export default App; diff --git a/src/app/store.js b/src/app/store.js index 5e2834d..30c0c5a 100644 --- a/src/app/store.js +++ b/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, + }, }); diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js new file mode 100644 index 0000000..e34a769 --- /dev/null +++ b/src/features/timbre/Timbre.js @@ -0,0 +1,6 @@ +import React from 'react'; +import VCO from './parameters/VCO'; + +export function Timbre(props) { + return ; +} diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js new file mode 100644 index 0000000..469d390 --- /dev/null +++ b/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 ( +
+ Current Waveform {parameters.waveform} + + Current Mod Value {parameters.mod} + + dispatch( + parameterUpdated({ + id: 'vco1', + changes: { mod: e.target.value }, + }) + ) + } + /> +
+ ); +} diff --git a/src/features/timbre/timbreSlice.js b/src/features/timbre/timbreSlice.js new file mode 100644 index 0000000..365322c --- /dev/null +++ b/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;