Refactor code to use injected global store

Author: Kiho

npm-debug.log.1285439957

@@ -25,7 +25,7 @@
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-watch": "^4.3.1",
     "serve": "^6.4.1",
-    "svelte": "^1.41.2",
+    "svelte": "file:../../svelte",
     "typescript": "^2.6.1"
   }
 }

npm-debug.log.2713944281

@@ -1,9 +1,9 @@
 <button on:click="decrement()">-1</button>
 
 <script>
-  import { getActions } from 'redux-zero/svelte';
   import store from "../../store/store";
   import { actions } from "../../store/actions";
+  import { getActions } from 'redux-zero/svelte';
 
   const { decrement } = getActions(store, actions);
 

package.json

@@ -1,9 +1,9 @@
 <button on:click="increment()">+1</button>
 
 <script>
-  import { getActions } from 'redux-zero/svelte';
   import store from "../../store/store";
   import { actions } from "../../store/actions";
+  import { getActions } from 'redux-zero/svelte';
 
   const { increment } = getActions(store, actions);
 

public/js/bundle.min.js.map

@@ -1,21 +1,21 @@
 <h2>{{counter}}</h2>
+<button on:click="increment2()">+2</button>
+<button on:click="decrement2()">-2</button>
 
 <script>
-	import { connect } from 'redux-zero/svelte';
-	import store from '../../store/store';
+	import store from "../../store/store";
+	import { mapActions } from "../../store/actions";
 
+	const { increment2, decrement2 } = mapActions;
 	const mapToProps = ({ counter }) => ({ counter });
 
 	export default {
 		oncreate() {
-			connect(this, store, mapToProps);
+			this.connect(mapToProps, mapActions);
+		},
+		methods: {
+			decrement2,
+			increment2
 		}
-
-		// // Dummy placeholder data to suppress the warning message
-		// data() {
-		// 	return {
-		// 		counter: null
-		// 	}
-		// }
 	};
 </script>

src/components/counter/DecrementButton.html

@@ -1,5 +1,7 @@
 import App from './components/App.html';
+import store from './store/store';
 
 const app = new App({
 	target: document.querySelector('main'),
+	store: store
 });

src/components/counter/IncrementButton.html

@@ -1,4 +1,8 @@
-export const actions = store => ({
+export const stateActions = {
   increment: state => ({ counter: state.counter + 1 }),
-  decrement: state => ({ counter: state.counter - 1 })
-});
+  decrement: state => ({ counter: state.counter - 1 }),
+  increment2: state => ({ counter: state.counter + 2 }),
+  decrement2: state => ({ counter: state.counter - 2 })
+};
+
+export const actions = store => stateActions;

src/components/counter/Value.html

@@ -0,0 +1,11 @@
+export function bindActions(actions, store) {
+    actions = typeof actions === "function" ? actions(store) : actions
+    let bound = {}
+    for (let name in actions) {
+      bound[name] = (...args) => {
+        let ret = actions[name](store.getState(), ...args)
+        if (ret != null) store.setState(ret)
+      }
+    }
+    return bound
+  }

src/main.ts

@@ -1,8 +1,29 @@
 import createStore from 'redux-zero';
+import { connect, getActions } from 'redux-zero/svelte';
 
 const initialState = { 
   counter: 0
 };
+
 const store = createStore(initialState);
+const context: any = store;
+
+const init = (component, options) => {
+  options.data = options.data || {};
+  component.connect = (mapToProps, mapActions) => {
+    if (mapActions) {
+      const actions = getActions(() => mapActions, store);
+      const methods = {};
+      Object.keys(actions).forEach(x => {
+        if (component[x]) methods[x] = actions[x];
+      });
+      Object.assign(component, methods);
+    }
+    connect(component, store, mapToProps);
+  }
+  Object.assign(options.data, store.getState());
+}
+
+context.init = init;
 
 export default store;

src/store/actions.ts

@@ -1,5 +1,5 @@
 declare class Svelte {
-  constructor(options: { target: Element, data?: any });
+  constructor(options: { target: Element, data?: any, store?: any });
 
   get(name: string);
   set(data: any);

src/store/bindActions.ts

@@ -9,7 +9,7 @@
     "outDir": "build/js/",
     "noImplicitReturns": true,
     "allowSyntheticDefaultImports": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": [ "dom", "es2015", "es2017.object" ],
     "typeRoots": [
       "./node_modules/@types"
     ]