Add working RN counter example

Author: maxdeviant

examples/ReactNativeExample/app/components/Counter.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import {
+  Button,
+  Text,
+  View
+} from 'react-native';
+
+class Counter extends Component {
+  incrementIfOdd = () => {
+    if (this.props.value % 2 !== 0) {
+      this.props.onIncrement();
+    }
+  }
+
+  incrementAsync = () => {
+    setTimeout(this.props.onIncrement, 1000);
+  }
+
+  render() {
+    const { value, onIncrement, onDecrement } = this.props;
+    return (
+      <View>
+        <Text>
+          Clicked: {value} times
+        </Text>
+        <Button
+          title='+'
+          onPress={onIncrement}
+        />
+        <Button
+          title='-'
+          onPress={onDecrement}
+        />
+        <Button
+          title='Increment if odd'
+          onPress={this.incrementIfOdd}
+        />
+        <Button
+          title='Increment async'
+          onPress={this.incrementAsync}
+        />
+      </View>
+    );
+  }
+}
+
+export default Counter;

examples/ReactNativeExample/app/containers/CounterContainer.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Counter from '../components/Counter';
+
+class CounterContainer extends Component {
+  render() {
+    const { value, onIncrement, onDecrement } = this.props;
+    return (
+      <Counter
+        value={value}
+        onIncrement={onIncrement}
+        onDecrement={onDecrement}
+      />
+    );
+  }
+}
+
+export default connect(
+  state => ({
+    value: state.count
+  }),
+  dispatch => ({
+    onIncrement: () => dispatch({ type: 'INCREMENT' }),
+    onDecrement: () => dispatch({ type: 'DECREMENT' })
+  })
+)(CounterContainer);

examples/ReactNativeExample/app/reducers/index.js

@@ -0,0 +1,20 @@
+const rootReducer = (state = {
+  count: 0
+}, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return {
+        ...state,
+        count: state.count + 1
+      };
+    case 'DECREMENT':
+      return {
+        ...state,
+        count: state.count - 1
+      };
+    default:
+      return state;
+  }
+};
+
+export default rootReducer;

examples/ReactNativeExample/index.ios.js

@@ -13,12 +13,11 @@ import {
   View
 } from 'react-native';
 import { compose, createStore } from 'redux';
+import { Provider } from 'react-redux';
 import { persistStore, autoRehydrate } from 'redux-persist';
 import createEncryptor from 'redux-persist-transform-encrypt';
-
-function rootReducer(state = {}, action) {
-  return state;
-}
+import CounterContainer from './app/containers/CounterContainer';
+import rootReducer from './app/reducers';
 
 const store = createStore(
   rootReducer,
@@ -42,18 +41,21 @@ persistStore(store, {
 export default class ReactNativeExample extends Component {
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
+      <Provider store={store}>
+        <View style={styles.container}>
+          <Text style={styles.welcome}>
+            Welcome to React Native!
+          </Text>
+          <Text style={styles.instructions}>
+            To get started, edit index.ios.js
+          </Text>
+          <Text style={styles.instructions}>
+            Press Cmd+R to reload,{'\n'}
+            Cmd+D or shake for dev menu
+          </Text>
+          <CounterContainer />
+        </View>
+      </Provider>
     );
   }
 }

examples/ReactNativeExample/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "0.43.1",
+    "react-redux": "^5.0.3",
     "redux": "^3.6.0",
     "redux-persist": "^4.6.0",
     "redux-persist-transform-encrypt": "^1.0.1"