Added an example for components connected to Redux state

.gitignore

@@ -1,3 +1,6 @@
+# Project
+web/js/bundle.*
+
 # Node
 logs
 *.log

README.md

@@ -1,14 +1,16 @@
 React Native Code Reuse
 =======================
-This example shows how to share code between different platforms when using React & React Native. It is based on the fact that React Native will detect when a file has a .ios. or .android. extension and load the relevant platform file when required from other components (see [Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)).
+This example shows how to share code between different platforms (web, iOS and Android) when using React & React Native. It is based on the fact that React Native will detect when a file has a .ios. or .android. extension and load the relevant platform file when required from other components (see [Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)).
 
 Each platform uses the corresponding ```index.js``` file as an entry point. All other code resides in the [app](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app) directory.
 
 Each component is presented as a subpackage containing implementations for all platforms. For simple components which don't do any logic, we define only two views for web and mobile and load the relevant view in the subpackage index. Like in the [App](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/App) component.
 
  For components which have a different appearance for iOS and Android, we define two views with ```ios.js``` and ```android.js``` extensions each containing a platform specific code. Like in the [Title](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/Title) component.
 
- And for components which do some logic, we also add a component container to define that logic. In such case in the subpackage index, we load the container and it renders the view. For max code reuse, we can put all shared logic into the abstract container and put platform specific code into subclasses. Like in the [HelpButton](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/HelpButton) component.
+For components which do some logic, we add a container component to define that logic. In such case in the subpackage index, we load the container and it renders the view. For max code reuse, we can put all shared logic into the abstract container and put platform specific code into subclasses. Like in the [AboutButton](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/AboutButton) component.
+
+For components which need to use Redux state and dispatch actions (connected components), we connect them once in the subpackage index and pass the received props to containers or views the same as previous components. You can check the example in the [HelpButton](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/HelpButton) component.
 
 Installation
 ============

app/actions/help-actions.js

@@ -0,0 +1,7 @@
+import * as types from './types';
+
+export const helpRequested = () => {
+    return {
+        type: types.HELP_REQUESTED
+    };
+};

app/actions/types.js

@@ -0,0 +1 @@
+export const HELP_REQUESTED = 'HELP_REQUESTED';

app/components/AboutButton/AboutButtonContainer.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import AbstractAboutButtonContainer from './AbstractAboutButtonContainer';
+
+export default class AboutButtonContainer extends AbstractAboutButtonContainer {
+    onClick() {
+        alert('This is an example application to show how to reuse code between React and React Native');
+    }
+}

app/components/AboutButton/AboutButtonContainer.native.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Alert } from 'react-native';
+
+import AbstractAboutButtonContainer from './AbstractAboutButtonContainer';
+
+export default class AboutButtonContainer extends AbstractAboutButtonContainer {
+    onClick() {
+        Alert.alert('This is an example application to show how to reuse code between React and React Native');
+    }
+}

app/components/AboutButton/AboutButtonView.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default props =>  
+    <button className="button" onClick={props.onClick}>
+        About
+    </button>;

app/components/AboutButton/AboutButtonView.native.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Button from 'react-native-button';
+
+import styles from '../../native/styles';
+
+export default props => 
+    <Button 
+        onPress={props.onClick} 
+        style={styles.buttonText}
+        containerStyle={styles.button}>
+        About
+    </Button>;

app/components/AboutButton/AbstractAboutButtonContainer.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AboutButtonView from './AboutButtonView';
+
+export default class AbstractAboutButtonContainer extends React.Component {
+    constructor(props) {
+        // new.target is not working on Android
+        // if (new.target === AbstractAboutButtonContainer) {
+        //     throw new TypeError('Cannot construct AbstractAboutButtonContainer instances directly');
+        // }
+
+        super(props);
+
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick() {
+        throw new TypeError('Abstract method onClick is not implemented');
+    }
+
+    render() {
+        return <AboutButtonView onClick={this.onClick}/>;
+    }
+}

app/components/AboutButton/index.js

@@ -0,0 +1,2 @@
+import AboutButtonContainer from './AboutButtonContainer';
+export default AboutButtonContainer;

app/components/App/AppView.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import Title from '../Title';
+import AboutButton from '../AboutButton';
 import HelpButton from '../HelpButton';
 
 export default () =>
     <div className="container">
         <Title/>
+        <AboutButton/>
         <HelpButton/>
     </div>;

app/components/App/AppView.native.js

@@ -4,10 +4,14 @@ import { View } from 'react-native';
 import styles from '../../native/styles';
 
 import Title from '../Title';
+import AboutButton from '../AboutButton';
 import HelpButton from '../HelpButton';
 
 export default () =>
     <View style={styles.container}>
         <Title/>
-        <HelpButton/>
+        <View style={styles.buttonContainer}>
+            <AboutButton/>
+            <HelpButton/>
+        </View>
     </View>;

app/components/App/index.js

@@ -1,2 +1,15 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import store from '../../store';
 import AppView from './AppView';
-export default AppView;
+
+export default class AppContainer extends React.Component {
+    render() {
+        return (
+            <Provider store={store}>
+                <AppView/>
+            </Provider>
+        )
+    }
+}

app/components/HelpButton/AbstractHelpButtonContainer.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import HelpButtonView from './HelpButtonView';
 
 export default class AbstractHelpButtonContainer extends React.Component {
@@ -14,10 +16,20 @@ export default class AbstractHelpButtonContainer extends React.Component {
     }
 
     onClick() {
-        throw new TypeError('Abstract method onClick is not implemented');
+        this.displayMessage(`You asked for help ${this.props.helpRequests + 1} time(s)`);
+        this.props.helpRequested();
+    }
+
+    displayMessage(message) {
+        throw new TypeError('Abstract method displayMessage is not implemented');
     }
 
     render() {
         return <HelpButtonView onClick={this.onClick}/>;
     }
-}
+}
+
+AbstractHelpButtonContainer.propTypes = {
+    helpRequests: PropTypes.number.isRequired,
+    helpRequested: PropTypes.func.isRequired,
+};

app/components/HelpButton/HelpButtonContainer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import AbstractHelpButtonContainer from './AbstractHelpButtonContainer';
 
 export default class HelpButtonContainer extends AbstractHelpButtonContainer {
-    onClick() {
-        alert('How can we help you?');
+    displayMessage(message) {
+        alert(message);
     }
 }

app/components/HelpButton/HelpButtonContainer.native.js

@@ -4,7 +4,7 @@ import { Alert } from 'react-native';
 import AbstractHelpButtonContainer from './AbstractHelpButtonContainer';
 
 export default class HelpButtonContainer extends AbstractHelpButtonContainer {
-    onClick() {
-        Alert.alert('How can we help you?');
+    displayMessage(message) {
+        Alert.alert(message);
     }
 }

app/components/HelpButton/HelpButtonView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
 export default props =>  
-    <button className="help-button" onClick={props.onClick}>
+    <button className="button" onClick={props.onClick}>
         Help
     </button>;

app/components/HelpButton/HelpButtonView.native.js

@@ -6,7 +6,7 @@ import styles from '../../native/styles';
 export default props => 
     <Button 
         onPress={props.onClick} 
-        style={styles.helpButtonText} 
-        containerStyle={styles.helpButton}>
+        style={styles.buttonText}
+        containerStyle={styles.button}>
         Help
     </Button>;

app/components/HelpButton/index.js

@@ -1,2 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { helpRequested } from '../../actions/help-actions'
+import { getHelpRequestsNumber } from '../../reducers';
 import HelpButtonContainer from './HelpButtonContainer';
-export default HelpButtonContainer;
+
+class HelpButton extends React.Component {
+    render() {
+        return (
+            <HelpButtonContainer { ...this.props }/>
+        )
+    }
+}
+
+HelpButton.propTypes = {
+    helpRequests: PropTypes.number.isRequired,
+    helpRequested: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = store => ({
+    helpRequests: getHelpRequestsNumber(store),
+});
+
+export default connect(mapStateToProps, { helpRequested })(HelpButton)

app/native/styles.js

@@ -14,14 +14,18 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         marginBottom: 20
     },
-    helpButton: {
+    buttonContainer: {
+        flexDirection: 'row',
+    },
+    button: {
         backgroundColor: '#80CBC4', 
         width: 100,
-        padding: 10
+        padding: 10,
+        margin: 5,
     },
-    helpButtonText: {
+    buttonText: {
         color: '#FFFFFF'
-    }
+    },
 });
 
 export default styles;

app/reducers/help.js

@@ -0,0 +1,16 @@
+import * as types from '../actions/types';
+
+const initialState = {
+    requests: 0,
+};
+
+export default function(state = initialState, action) {
+    switch (action.type) {
+        case types.HELP_REQUESTED:
+            return {requests: state.requests + 1};
+
+        default: return state;
+    }
+};
+
+export const getRequestsNumber = state => state.requests;

app/reducers/index.js

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+
+import help, * as helpSelectors from './help';
+
+export default combineReducers({
+    help,
+});
+
+export const getHelpRequestsNumber = store => helpSelectors.getRequestsNumber(store.help);

app/store.js

@@ -0,0 +1,4 @@
+import { createStore } from 'redux';
+import reducers from './reducers';
+
+export default createStore(reducers);

package.json

@@ -7,10 +7,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "prop-types": "^15.5.10",
     "react": "15.4.2",
     "react-dom": "15.4",
     "react-native": "0.41.2",
-    "react-native-button": "^1.7.1"
+    "react-native-button": "^1.7.1",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2"
   },
   "devDependencies": {
     "babel-cli": "^6.22",

web/css/styles.css

@@ -18,11 +18,12 @@ body {
     margin-bottom: 32px;
 }
 
-.help-button {
+.button {
     border: 0;
     background: #80CBC4;
     width: 180px;
     height: 40px;
+    margin: 5px;
     color: #FFFFFF;
     font-size: 18px;
     text-transform: uppercase;