decoupled search type/value reducers

src/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { Provider, connect } from 'react-redux';
 import { LexEditor } from './LexComponents';
-import * as actionCreators from './actions/actionCreators';
+import * as actionCreators from './actionCreators';
 import { walleStore } from './WallEStore';
 import { Header, Icon, Segment } from 'semantic-ui-react';
 

src/LexComponents.tsx

@@ -84,12 +84,14 @@ export class LexEditor extends React.Component<any, any> {
     return (
       <div>
         <LexSearch
+          {...this.props}
           {...{ fieldMetaMap: this.fieldMetaMap }}
           handleOnSearch={(e: any) => this.handleOnSearch(e)}
-          searchValue={searchText}
-          searchType={this.props.searchProp.searchType}
+          // searchValue={searchText}
+          // searchType={this.props.searchProp.searchType}
         />
         <LexMatches
+          {...this.props}
           {...{ fieldMetaMap: this.fieldMetaMap }}
           matchedEntries={matchedEntries}
           selectionMeta={this.selectFields}
@@ -116,8 +118,6 @@ export class LexEditor extends React.Component<any, any> {
 // export const ReduxLexEditor = connect()(LexEditor);
 
 class LexSearch extends React.Component<any, any> {
-  searchType: String = 'label';
-  searchValue: String = '';
   public render() {
     let dropOptions = _.keys(this.props.fieldMetaMap).map((k, i, c) => {
       return { key: i, value: k, text: _.capitalize(k) };
@@ -127,7 +127,7 @@ class LexSearch extends React.Component<any, any> {
         <Dropdown
           options={dropOptions}
           onChange={(e, d) => this.handleChange(d, true)}
-          value={this.props.searchType}
+          value={this.props.searchProp.searchType}
           compact={true}
           selection={true}
         />
@@ -135,7 +135,7 @@ class LexSearch extends React.Component<any, any> {
           type="text"
           placeholder="Search input"
           dir="auto"
-          value={this.props.searchValue}
+          value={this.props.searchProp.searchValue}
           onChange={(e, d) => this.handleChange(d, false)}
         />
       </div>
@@ -144,14 +144,10 @@ class LexSearch extends React.Component<any, any> {
 
   private handleChange(e: any, t: boolean) {
     if (t) {
-      this.searchType = e.value;
+      this.props.searchType(e.value);
     } else {
-      this.searchValue = e.value;
+      this.props.searchValue(e.value);
     }
-    this.props.handleOnSearch({
-      searchType: this.searchType,
-      searchValue: this.searchValue
-    });
   }
 }
 

src/WallEStore.tsx

@@ -1,5 +1,5 @@
 import { createStore } from 'redux';
-import rootReducer from './reducers/index';
+import rootReducer from './reducers';
 
 const defaultState = {
   search: { searchValue: 'just', searchType: 'label' }

src/actionCreators.tsx

@@ -7,6 +7,20 @@ export function search(searchValue: any, searchType: any) {
   };
 }
 
+export function searchType(searchType: any) {
+  return {
+    type: 'ACTION_SEARCH_TYPE_CHANGE',
+    searchType
+  };
+}
+
+export function searchValue(searchValue: any) {
+  return {
+    type: 'ACTION_SEARCH_VALUE_CHANGE',
+    searchValue
+  };
+}
+
 export function save(lexItem: any) {
   return {
     type: 'ACTION_SAVE_LEXITEM',

src/reducers.tsx

@@ -0,0 +1,30 @@
+import { combineReducers } from 'redux';
+
+function searchValue(state: any = {}, action: any) {
+  if (action.type === 'ACTION_SEARCH_VALUE_CHANGE') {
+    return action.searchValue;
+  }
+  return state;
+}
+
+function searchType(state: any = {}, action: any) {
+  if (action.type === 'ACTION_SEARCH_TYPE_CHANGE') {
+    return action.searchType;
+  }
+  return state;
+}
+
+function save(state: any = {}, action: any) {
+  if (action.type === 'ACTION_SAVE_LEXITEM') {
+    return {
+      ...state,
+      lexItem: action.lexItem,
+    };
+  }
+  return state;
+}
+
+const searchReducer = combineReducers({ searchValue, searchType });
+const rootReducer = combineReducers({ search: searchReducer, save });
+
+export default rootReducer;

src/reducers/index.tsx

@@ -1,26 +0,0 @@
-import { combineReducers } from 'redux';
-
-function search(state: any = {}, action: any) {
-  if (action.type === 'ACTION_SEARCH_TEXT') {
-    return {
-      ...state,
-      searchValue: action.searchValue,
-      searchType: action.searchType
-    };
-  }
-  return state;
-}
-
-function save(state: any = {}, action: any) {
-  if (action.type === 'ACTION_SAVE_LEXITEM') {
-    return {
-      ...state,
-      lexItem: action.lexItem,
-    };
-  }
-  return state;
-}
-
-const rootReducer = combineReducers({ search, save });
-
-export default rootReducer;