refactored Redux Example (#819)

packages/react-navigation/examples/ReduxExample/index.js

@@ -3,145 +3,13 @@
  */
 
 import React from 'react';
-import {
-  AppRegistry,
-  AsyncStorage,
-  Button,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {
-  NavigationActions,
-  addNavigationHelpers,
-  StackNavigator,
-} from 'react-navigation';
-import {
-  Provider,
-  connect,
-} from 'react-redux';
-import {
-  createStore,
-  combineReducers,
-} from 'redux';
-import {
-  persistStore,
-  autoRehydrate,
-} from 'redux-persist';
+import { AppRegistry, AsyncStorage } from 'react-native';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { persistStore, autoRehydrate } from 'redux-persist';
 
-const ProfileScreen = ({ navigation }) => (
-  <View style={styles.container}>
-    <Text style={styles.welcome}>
-      Profile Screen
-    </Text>
-  </View>
-);
-ProfileScreen.navigationOptions = {
-  title: 'Profile',
-};
-
-const LoginScreen = ({ navigation }) => (
-  <View style={styles.container}>
-    <Text style={styles.welcome}>
-      Screen A
-    </Text>
-    <Text style={styles.instructions}>
-      This is great
-    </Text>
-    <Button
-      onPress={() => navigation.dispatch({ type: 'Login' })}
-      title="Log in"
-    />
-  </View>
-);
-LoginScreen.navigationOptions = {
-  title: 'Log In',
-};
-
-
-const LoginStatusMessage = connect(state => ({
-  isLoggedIn: state.auth.isLoggedIn,
-}))(({ isLoggedIn, dispatch }) => {
-  if (!isLoggedIn) {
-    return <Text>Please log in</Text>;
-  }
-  return (
-    <View>
-      <Text style={styles.welcome}>
-        {'You are "logged in" right now'}
-      </Text>
-      <Button
-        onPress={() => dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
-        title="Profile"
-      />
-    </View>
-  );
-});
-
-const AuthButton = connect(state => ({
-  isLoggedIn: state.auth.isLoggedIn,
-}), dispatch => ({
-  logout: () => dispatch({ type: 'Logout' }),
-  login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
-}))(({ logout, login, isLoggedIn }) => (
-  <Button
-    title={isLoggedIn ? 'Log Out' : 'Log In'}
-    onPress={isLoggedIn ? logout : login}
-  />
-));
-
-const MainScreen = () => (
-  <View style={styles.container}>
-    <LoginStatusMessage />
-    <AuthButton />
-  </View>
-);
-MainScreen.navigationOptions = {
-  title: 'Home Screen',
-};
-
-const AppNavigator = StackNavigator({
-  Login: { screen: LoginScreen },
-  Main: { screen: MainScreen },
-  Profile: { screen: ProfileScreen },
-});
-
-const AppWithNavigationState = connect(state => ({
-  nav: state.nav,
-}))(({ dispatch, nav }) => (
-  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
-));
-
-const initialNavState = {
-  index: 1,
-  routes: [
-    { key: 'InitA', routeName: 'Main' },
-    { key: 'InitB', routeName: 'Login' },
-  ],
-};
-
-const initialAuthState = { isLoggedIn: false };
-
-const AppReducer = combineReducers({
-  nav: (state = initialNavState, action) => {
-    if (action.type === 'Login') {
-      return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
-    }
-    if (action.type === 'Logout') {
-      return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
-    }
-    return AppNavigator.router.getStateForAction(action, state);
-  },
-  auth: (state = initialAuthState, action) => {
-    if (action.type === 'Login') {
-      return { ...state, isLoggedIn: true };
-    }
-    if (action.type === 'Logout') {
-      return { ...state, isLoggedIn: false };
-    }
-    return state;
-  },
-});
+import AppReducer from 'src/reducers';
+import AppWithNavigationState from 'src/navigators/AppNavigator';
 
 class ReduxExampleApp extends React.Component {
   store = createStore(AppReducer, undefined, autoRehydrate());
@@ -159,23 +27,4 @@ class ReduxExampleApp extends React.Component {
   }
 }
 
-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,
-  },
-});
-
 AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);

packages/react-navigation/examples/ReduxExample/src/components/AuthButton.js

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Button } from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const AuthButton = ({ logout, login, isLoggedIn }) => (
+  <Button
+    title={isLoggedIn ? 'Log Out' : 'Log In'}
+    onPress={isLoggedIn ? logout : login}
+  />
+);
+
+AuthButton.propTypes = {
+  isLoggedIn: PropTypes.bool.isRequired,
+  logout: PropTypes.func.isRequired,
+  login: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  isLoggedIn: state.auth.isLoggedIn,
+});
+
+const mapDispatchToProps = dispatch => ({
+  logout: () => dispatch({ type: 'Logout' }),
+  login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);

packages/react-navigation/examples/ReduxExample/src/components/LoginScreen.js

@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react';
+import {
+  Button,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const LoginScreen = ({ navigation }) => (
+  <View style={styles.container}>
+    <Text style={styles.welcome}>
+      Screen A
+    </Text>
+    <Text style={styles.instructions}>
+      This is great
+    </Text>
+    <Button
+      onPress={() => navigation.dispatch({ type: 'Login' })}
+      title="Log in"
+    />
+  </View>
+);
+
+LoginScreen.propTypes = {
+  navigation: PropTypes.object.isRequired,
+};
+
+LoginScreen.navigationOptions = {
+  title: 'Log In',
+};

packages/react-navigation/examples/ReduxExample/src/components/LoginStatusMessage.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import {
+  Button,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const styles = StyleSheet.create({
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
+  if (!isLoggedIn) {
+    return <Text>Please log in</Text>;
+  }
+  return (
+    <View>
+      <Text style={styles.welcome}>
+        {'You are "logged in" right now'}
+      </Text>
+      <Button
+        onPress={() => dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
+        title="Profile"
+      />
+    </View>
+  );
+};
+
+LoginStatusMessage.propTypes = {
+  isLoggedIn: PropTypes.bool.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  isLoggedIn: state.auth.isLoggedIn,
+});
+
+export default connect(mapStateToProps)(LoginStatusMessage);

packages/react-navigation/examples/ReduxExample/src/components/MainScreen.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import LoginStatusMessage from './LoginStatusMessage';
+import AuthButton from './AuthButton';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+});
+
+const MainScreen = () => (
+  <View style={styles.container}>
+    <LoginStatusMessage />
+    <AuthButton />
+  </View>
+);
+MainScreen.navigationOptions = {
+  title: 'Home Screen',
+};

packages/react-navigation/examples/ReduxExample/src/components/ProfileScreen.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const ProfileScreen = () => (
+  <View style={styles.container}>
+    <Text style={styles.welcome}>
+      Profile Screen
+    </Text>
+  </View>
+);
+
+ProfileScreen.navigationOptions = {
+  title: 'Profile',
+};

packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { addNavigationHelpers, StackNavigator } from 'react-navigation';
+
+import LoginScreen from '../components/LoginScreen';
+import MainScreen from '../components/MainScreen';
+import ProfileScreen from '../components/ProfileScreen';
+
+export const AppNavigator = StackNavigator({
+  Login: { screen: LoginScreen },
+  Main: { screen: MainScreen },
+  Profile: { screen: ProfileScreen },
+});
+
+const AppWithNavigationState = ({ dispatch, nav }) => (
+  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
+);
+
+AppWithNavigationState.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  nav: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = state => ({
+  nav: state.nav,
+});
+
+export default connect(mapStateToProps)(AppWithNavigationState);

packages/react-navigation/examples/ReduxExample/src/reducers/index.js

@@ -0,0 +1,43 @@
+import { combineReducers } from 'redux';
+import { NavigationActions } from 'react-navigation';
+
+import { AppNavigator } from '../navigators/AppNavigator';
+
+const initialNavState = {
+  index: 1,
+  routes: [
+    { key: 'InitA', routeName: 'Main' },
+    { key: 'InitB', routeName: 'Login' },
+  ],
+};
+
+const initialAuthState = { isLoggedIn: false };
+
+function nav(state = initialNavState, action) {
+  switch (action.type) {
+    case 'Login':
+      return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
+    case 'Logout':
+      return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
+    default:
+      return AppNavigator.router.getStateForAction(action, state);
+  }
+}
+
+function auth(state = initialAuthState, action) {
+  switch (action.type) {
+    case 'Login':
+      return { ...state, isLoggedIn: true };
+    case 'Logout':
+      return { ...state, isLoggedIn: false };
+    default:
+      return state;
+  }
+}
+
+const AppReducer = combineReducers({
+  nav,
+  auth,
+});
+
+export default AppReducer;