add react-reduct for better state change

@@ -2,8 +2,8 @@
   "devToolsPort": 19002,
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "expoServerPort": 19000,
   "packagerPort": 19001,
   "packagerPort": 19001,
-  "packagerPid": 18100,
-  "expoServerNgrokUrl": "https://ep-ukj.anonymous.searchguide.exp.direct",
-  "packagerNgrokUrl": "https://packager.ep-ukj.anonymous.searchguide.exp.direct",
-  "ngrokPid": 20760
+  "packagerPid": 30352,
+  "expoServerNgrokUrl": "https://s4-47j.anonymous.searchguide.exp.direct",
+  "packagerNgrokUrl": "https://packager.s4-47j.anonymous.searchguide.exp.direct",
+  "ngrokPid": 19368
 }
 }

@@ -3,6 +3,6 @@
   "lanType": "ip",
   "lanType": "ip",
   "dev": true,
   "dev": true,
   "minify": false,
   "minify": false,
-  "urlRandomness": "ep-ukj",
+  "urlRandomness": "s4-47j",
   "https": false
   "https": false
 }
 }

 import React from 'react';
 import React from 'react';
-import {View,Text,StyleSheet} from 'react-native'
-import AppContainer from './components/AppContainer/AppContainer';
-import Loading from './components/Loading/Loading';
+import Main from './components/Main/Main'
+import { Provider,connect } from 'react-redux';
+import Store from './reducers/Store';
 
 
-export default class App extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      loading:false
-    };
-  }
-
-  toggleLoading=()=>{
-    this.setState({loading:true});
-  }
-
-  render(){
+const App = () => {
       return (
       return (
-        <>
-          {this.state.loading ? <Loading/>  :  null}
-          <AppContainer  toggleLoading={this.toggleLoading}/>
-        </>
+        <Provider store={Store}>
+          <Main />
+        </Provider>
       )
       )
-  }
 }
 }
 
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-});
\ No newline at end of file
+export default App;
\ No newline at end of file

@@ -6,13 +6,10 @@ import Home from '../Home/Home';
 import Rate from '../Rate/Rate';
 import Rate from '../Rate/Rate';
 
 
 
 
-const HomeScreen = (props) => (<Home toggleLoading={props.toggleLoading} />);
-const RateScreen = (props) => (<Rate toggleLoading={props.toggleLoading} />);
-
 const AppTabNavigator = createMaterialTopTabNavigator (
 const AppTabNavigator = createMaterialTopTabNavigator (
     {
     {
-        Home: HomeScreen,
-        Rate: RateScreen
+        Home: Home,
+        Rate: Rate
     },
     },
     {
     {
         initialRouteName: 'Home',
         initialRouteName: 'Home',
@@ -43,5 +40,5 @@ const AppTabNavigator = createMaterialTopTabNavigator (
         },
         },
     }
     }
 );
 );
-const AppContainer = createAppContainer(AppTabNavigator);
-export default AppContainer;
\ No newline at end of file
+const AppTabContainer = createAppContainer(AppTabNavigator);
+export default AppTabContainer;
\ No newline at end of file

@@ -19,7 +19,7 @@ class Home extends React.Component {
     render() {
     render() {
         return(
         return(
             <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
             <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
-                <SearchBar />
+                <SearchBar toggleLoading={this.props.toggleLoading}/>
                 <SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
                 <SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
             </View>
             </View>
             
             

+import React from 'react';
+import AppTabContainer from '../AppTabContainer/AppTabContainer';
+import Loading from '../Loading/Loading';
+import { connect } from 'react-redux';
+
+const Main = ({ isLoading, toggleLoading}) => {
+    if ( isLoading ) {
+        return(
+            <>
+            <Loading / >
+            <AppTabContainer  toggleLoading={toggleLoading}/>
+            </>
+        )
+    }
+    else{
+        return (
+            <AppTabContainer  toggleLoading={toggleLoading}/>
+        )
+    }
+    
+}
+
+
+const MainContainer = ({isLoading, toggleLoading}) => {
+    return(<Main isLoading={isLoading} />)
+}
+  
+  const mapStateToProps = (state) => ({isLoading : state.ToggleLoading.isLoading})
+  
+  export default connect(mapStateToProps)(MainContainer);
\ No newline at end of file

 import React from 'react';
 import React from 'react';
-import {View,ScrollView,Alert} from 'react-native';
-import { Searchbar, Divider, Text } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/FontAwesome';
-
+import {View,Alert} from 'react-native';
+import { Searchbar } from 'react-native-paper';
 
 
 export default class SearchBar extends React.Component {
 export default class SearchBar extends React.Component {
     constructor(props){
     constructor(props){
@@ -17,7 +15,8 @@ export default class SearchBar extends React.Component {
     }
     }
 
 
     submit=()=>{
     submit=()=>{
-        alert(this.state.query);
+        this.props.toggleLoading;
+        setInterval(()=>{this.props.toggleLoading},5);
         this.setState({query:''});
         this.setState({query:''});
     }
     }
 
 

@@ -5704,6 +5704,19 @@
         "react-deep-force-update": "^1.0.0"
         "react-deep-force-update": "^1.0.0"
       }
       }
     },
     },
+    "react-redux": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
+      "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
     "react-timer-mixin": {
     "react-timer-mixin": {
       "version": "0.13.4",
       "version": "0.13.4",
       "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
       "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
@@ -5751,6 +5764,15 @@
         "util-deprecate": "~1.0.1"
         "util-deprecate": "~1.0.1"
       }
       }
     },
     },
+    "redux": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.4.tgz",
+      "integrity": "sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
     "regenerate": {
       "version": "1.4.0",
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -6701,6 +6723,11 @@
         "has-flag": "^3.0.0"
         "has-flag": "^3.0.0"
       }
       }
     },
     },
+    "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=="
+    },
     "temp": {
     "temp": {
       "version": "0.8.3",
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
       "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",

@@ -24,7 +24,9 @@
     "react-native-web": "^0.11.7",
     "react-native-web": "^0.11.7",
     "react-navigation": "^4.0.10",
     "react-navigation": "^4.0.10",
     "react-navigation-material-bottom-tabs": "^2.1.5",
     "react-navigation-material-bottom-tabs": "^2.1.5",
-    "react-navigation-tabs": "^2.5.6"
+    "react-navigation-tabs": "^2.5.6",
+    "react-redux": "^7.1.3",
+    "redux": "^4.0.4"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "babel-preset-expo": "^7.1.0",
     "babel-preset-expo": "^7.1.0",

+import { createStore, combineReducers } from 'redux';
+import ToggleLoading from './ToggleLoading'
+ 
+const store = combineReducers({ ToggleLoading }); 
+ 
+export default createStore(store)
\ No newline at end of file

+
+
+const TOGGLE_LOADING = 'ToggleLoading/TOGGLE';
+
+export const toggleLoading = () => ({ type: TOGGLE_LOADING,})
+
+const initialState = {
+    isLoading: false,
+};
+   
+export default ToggleLoading = (state = initialState, action) => {
+    switch (action.type) {
+        case TOGGLE_LOADING:
+            return { isLoading: !initialState.isLoading };
+        default:
+            return state;
+    }
+}
\ No newline at end of file