Setup foundation for redux

assets/scripts/src/actions/index.js

@@ -0,0 +1,24 @@
+let initialId = 0;
+export const addItem = (value, element) => {
+    return {
+        id: initialId++;
+        type: 'ADD_ITEM',
+        value: value,
+        element: element,
+        active: true
+    }
+}
+
+export const removeItem = (element) => {
+    return {
+        type: 'REMOVE_ITEM',
+        active: false
+    }
+}
+
+export const updateItem = (value, element) => {
+    return {
+        type: 'UPDATE_ITEM',
+        value: value
+    }
+}

assets/scripts/src/choices.js

@@ -1,10 +1,14 @@
 'use strict';
 
+import { createStore } from 'redux';
+import choices from './reducers/index.js'
 import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
 
+
 /**
 
     TODO:
+    - State handling
     - Dynamically set input width to contents
     - Handle select input
     - Handle multiple select input ?
@@ -13,8 +17,9 @@ import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
 
 export class Choices {
     constructor(options) {
-        const FAKE_EL = document.createElement("FAKE_ELement");
+        const FAKE_EL = document.createElement("fakeel");
         const USER_OPTIONS = options || {};
+        const STORE = createStore(choices);
         const DEFAULT_OPTIONS = {
             element: document.querySelector('[data-choice]'),
             disabled: false,
@@ -37,6 +42,10 @@ export class Choices {
 
         // Merge options with user options
         this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
+        this.store = STORE;
+
+        console.log(this.store);
+
         this.initialised = false;
         this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
 

assets/scripts/src/reducers/index.js

@@ -0,0 +1,36 @@
+const choice = (state = [], action) => {
+    console.log('Choice', action);
+    switch(action.type) {
+        case 'ADD_VALUE':
+            return {
+                value: action.value,
+                element: action.element,
+                active: true
+            };
+        case 'REMOVE_VALUE':
+            return Object.assign({}, state, {
+                active: false
+            });
+        default:
+            return state;
+    }
+}
+
+const choices = (state = {}, action) => {
+    console.log('Choices', action);
+    switch(action.type) {
+        case 'ADD_VALUE':
+            return [
+            ...state,
+                choice(undefined, action)
+            ]
+        case 'REMOVE_VALUE':
+            return state.map(t =>
+                choice(t, action)
+              )
+        default:
+            return state;
+    }
+}
+
+export default choices

package.json

@@ -40,5 +40,8 @@
     "postcss-cli": "^2.5.1",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "redux": "^3.3.1"
   }
 }