commit 9882c10d030d27d7868296c52a257b5cd3d47903
parent f6e47df2d4ef885ba7d5e1c84109436b000bba18
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Wed, 7 Mar 2018 23:42:38 -0800
initial redux state management
Diffstat:
5 files changed, 63 insertions(+), 17 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -5693,8 +5693,7 @@
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
- "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
- "dev": true
+ "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
},
"js-yaml": {
"version": "3.7.0",
@@ -5928,8 +5927,12 @@
"lodash": {
"version": "4.17.4",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
- "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
- "dev": true
+ "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+ },
+ "lodash-es": {
+ "version": "4.17.5",
+ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.5.tgz",
+ "integrity": "sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw=="
},
"lodash._arraycopy": {
"version": "3.0.0",
@@ -6131,7 +6134,6 @@
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
"integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
- "dev": true,
"requires": {
"js-tokens": "3.0.2"
}
@@ -7459,6 +7461,11 @@
"resolved": "https://registry.npmjs.org/preact/-/preact-8.2.6.tgz",
"integrity": "sha1-ACi0Ju+Y/Mp0Gjxhf/W4E7mpR8c="
},
+ "preact-redux": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/preact-redux/-/preact-redux-2.0.3.tgz",
+ "integrity": "sha1-lgpTXDImQ801mY8z8MLme8Hn6qs="
+ },
"preact-scripts": {
"version": "0.3.0-alpha",
"resolved": "https://registry.npmjs.org/preact-scripts/-/preact-scripts-0.3.0-alpha.tgz",
@@ -8837,6 +8844,17 @@
}
}
},
+ "redux": {
+ "version": "3.7.2",
+ "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
+ "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+ "requires": {
+ "lodash": "4.17.4",
+ "lodash-es": "4.17.5",
+ "loose-envify": "1.3.1",
+ "symbol-observable": "1.2.0"
+ }
+ },
"regenerate": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
@@ -9528,6 +9546,11 @@
"upper-case": "1.1.3"
}
},
+ "symbol-observable": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+ },
"symbol-tree": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
"dependencies": {
"dsp.js": "^1.0.1",
"envelope-generator": "^3.0.0",
- "preact": "^8.2.6"
+ "preact": "^8.2.6",
+ "preact-redux": "^2.0.3",
+ "redux": "^3.7.2"
},
"scripts": {
"start": "preact-scripts start",
diff --git a/src/App/index.js b/src/App/index.js
@@ -11,6 +11,7 @@ import './App.css';
import '../iconfont/style.css';
import consts from '../consts.js';
import helpers from '../helpers.js';
+import { Provider, connect } from 'preact-redux';
const initialWave = new Array(consts.BUF_SIZE)
.fill(0)
@@ -99,7 +100,6 @@ class App extends Component {
super();
let initBeats = 4;
this.state = {
- volume: 0.7,
bpm: 120,
beat: 0,
playing: false,
@@ -128,12 +128,6 @@ class App extends Component {
});
}
- updateVolume = (newVol) => {
- this.setState({
- volume: newVol
- });
- }
-
editingWaveform = () => this.state.tones[this.state.editingToneIdx].waveform
activeTones = () => {
@@ -360,7 +354,7 @@ class App extends Component {
update={this.setBeats}
/>
<Adsr adsr={this.state.adsr} update={this.updateAdsr} />
- <HSlider value={this.state.volume} update={this.updateVolume} />
+ <HSlider value={this.props.volume} update={this.props.setVol} />
</div>
<div class="wave-manager-container">
{tones}
@@ -368,7 +362,7 @@ class App extends Component {
<button onClick={() => this.addTone()}>+</button>
<Synth
waveform={this.totalWaveform()}
- volume={this.state.volume}
+ volume={this.props.volume}
adsr={this.state.adsr}
></Synth>
</div>
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,16 @@ import App from './App';
import './index.css';
import 'preact/devtools';
+import { Provider, connect } from 'preact-redux';
+import { store } from './store.js';
+
+const ConnectedApp = connect(state => state, {
+ setVol: (newVol) => ({type: 'SET_VOL', volume: newVol})
+})(App);
+
+const InformedApp = <Provider store={store}><ConnectedApp /></Provider>;
+
render(
- <App />,
- document.getElementById('root')
+ InformedApp,
+ document.getElementById('root')
);
diff --git a/src/store.js b/src/store.js
@@ -0,0 +1,18 @@
+import { createStore } from 'redux';
+
+const initialState = {
+ volume: 0.7
+};
+
+const reducer = (state, action) => {
+ let updates = {};
+ if (action.type === 'SET_VOL') {
+ updates.volume = action.volume;
+ }
+ return Object.assign({}, state, updates);
+}
+
+const store = createStore(reducer, initialState);
+
+export default store;
+export { store };
