Step 3.2: Connect Navitgation to App

client/src/app.js

@@ -1,30 +1,32 @@
 import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
 
 import { ApolloClient } from 'apollo-client';
 import { ApolloLink } from 'apollo-link';
 import { ApolloProvider } from 'react-apollo';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import { createHttpLink } from 'apollo-link-http';
-import { createStore, combineReducers } from 'redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import { ReduxCache, apolloReducer } from 'apollo-cache-redux';
 import ReduxLink from 'apollo-link-redux';
 import { onError } from 'apollo-link-error';
 
+import AppWithNavigationState, {
+  navigationReducer,
+  navigationMiddleware,
+} from './navigation';
+
 const URL = 'localhost:8080'; // set your comp's url here
 
 const store = createStore(
   combineReducers({
     apollo: apolloReducer,
+    nav: navigationReducer,
   }),
   {}, // initial state
-  composeWithDevTools(),
+  composeWithDevTools(
+    applyMiddleware(navigationMiddleware),
+  ),
 );
 
 const cache = new ReduxCache({ store });
@@ -48,44 +50,14 @@ export const client = new ApolloClient({
   cache,
 });
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
 export default class App extends Component {
   render() {
     return (
       <ApolloProvider client={client}>
         <Provider store={store}>
-          <View style={styles.container}>
-            <Text style={styles.welcome}>Welcome to React Native!</Text>
-            <Text style={styles.instructions}>To get started, edit App.js</Text>
-            <Text style={styles.instructions}>{instructions}</Text>
-          </View>
+          <AppWithNavigationState />
         </Provider>
       </ApolloProvider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});