basic redux store integrated

package-lock.json

@@ -45,6 +45,12 @@
       "version": "https://registry.npmjs.org/@types/react-dom/-/react-dom-15.5.0.tgz",
       "integrity": "sha1-f0+5YT1AURQXcyQve2tfGkazS9k="
     },
+    "@types/react-redux": {
+      "version": "4.4.45",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-4.4.45.tgz",
+      "integrity": "sha512-bPM6BJucVy9Y0JCf9PCEC5zwmqnTx9+YGILNVwhGmIrkVrOXoJaEuVurncTH7llV+bxjlZVcW/RLxQtDvAHcQw==",
+      "dev": true
+    },
     "@types/react-transition-group": {
       "version": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-1.1.0.tgz",
       "integrity": "sha1-GexL+hyxgJ7LxFmdDDjS6f+xm/4="
@@ -2384,6 +2390,11 @@
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
       "dev": true
     },
+    "hoist-non-react-statics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
+      "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+    },
     "home-or-tmp": {
       "version": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
       "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
@@ -2580,8 +2591,7 @@
     },
     "invariant": {
       "version": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
-      "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
-      "dev": true
+      "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A="
     },
     "invert-kv": {
       "version": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
@@ -3110,6 +3120,11 @@
       "version": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
       "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
     },
+    "lodash-es": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz",
+      "integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc="
+    },
     "lodash._reinterpolate": {
       "version": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
@@ -4238,6 +4253,11 @@
         }
       }
     },
+    "react-redux": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.5.tgz",
+      "integrity": "sha1-+OjHsjlCJXblLWt9sGQ5RpvphGo="
+    },
     "react-scripts-ts": {
       "version": "https://registry.npmjs.org/react-scripts-ts/-/react-scripts-ts-2.2.0.tgz",
       "integrity": "sha1-gWAEgstvTv7F/3mr8cmlRL032y8=",
@@ -4343,6 +4363,12 @@
       "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=",
       "dev": true
     },
+    "redux": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.1.tgz",
+      "integrity": "sha512-iEVTlORM5mv6xb3ZAOyrVehVUD+W87jdFAX6SYVgZh3/SQAWFSxTRJOqPWQdvo4VN4lJkNDvqKlBXBabsJTSkA==",
+      "dev": true
+    },
     "reflexbox": {
       "version": "3.0.0-0",
       "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-3.0.0-0.tgz",
@@ -4953,6 +4979,12 @@
       "integrity": "sha1-Jt8dHHA0hljk3qKIQxkUm3sxg7U=",
       "dev": true
     },
+    "symbol-observable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+      "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0=",
+      "dev": true
+    },
     "symbol-tree": {
       "version": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",

package.json

@@ -16,6 +16,7 @@
     "react": "^15.5.4",
     "react-addons-css-transition-group": "^15.5.2",
     "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
     "react-transition-group": "^1.1.3",
     "reflexbox": "^3.0.0-0",
     "semantic-ui-css": "^2.2.10",
@@ -24,6 +25,7 @@
     "xml2js-xpath": "^0.8.0"
   },
   "devDependencies": {
+    "@types/react-redux": "^4.4.45",
     "react-scripts-ts": "2.2.0"
   },
   "scripts": {

src/App.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { Provider } from 'react-redux';
 import { LexEditor } from './LexComponents';
 import { Header, Icon, Segment } from 'semantic-ui-react';
+import { walleStore } from './WallEStore';
 
 export class App extends React.Component<{}, null> {
   render() {
     return (
+      <Provider store={walleStore}>
       <div>
         <Segment inverted={true} size="tiny" attached={true}>
           <Header inverted={true} color="teal" size="mini">
@@ -16,6 +19,7 @@ export class App extends React.Component<{}, null> {
         </Segment>
         <LexEditor fileName="/new_es.xml" />
       </div>
+      </Provider>
     );
   }
 }

src/LexComponents.tsx

@@ -82,7 +82,7 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
 
 class LexSearch extends React.Component<any, any> {
   searchType: String = 'label';
-  searchValue: String = 'just';
+  searchValue: String = '';
   public render() {
     let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => {
       return { key: i, value: k, text: _.capitalize(k) };

src/WallEStore.tsx

@@ -0,0 +1,10 @@
+import { createStore } from 'redux';
+import rootReducer from './reducers/index';
+
+const defaultState = {
+  search: 'world'
+};
+
+const devToolsKey = '__REDUX_DEVTOOLS_EXTENSION__';
+const enhancer = window[devToolsKey] ? window[devToolsKey]()(createStore) : createStore;
+export const walleStore: any = enhancer(rootReducer, defaultState);

src/reducers/index.tsx

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+
+function search(state: any = [], action: any) {
+  console.log(state, action);
+  return state;
+}
+
+const rootReducer = combineReducers({ search });
+
+export default rootReducer;