Commit 86c5b26

mo khan <mo@mokhan.ca>
2016-11-27 05:35:40
add react-redux example.
master
1 parent 7c8abbb
Changed files (10)
app
actions
actionTypes.js
counterActions.js
components
counter.js
containers
app.js
awesome-app.js
reducers
counter.js
index.js
index.android.js
package.json
yarn.lock
app/actions/actionTypes.js
@@ -0,0 +1,2 @@
+export const INCREMENT = 'INCREMENT';
+export const DECREMENT = 'DECREMENT';
app/actions/counterActions.js
@@ -0,0 +1,9 @@
+import * as types from './actionTypes';
+
+export function increment() {
+  return { type: types.INCREMENT };
+}
+
+export function decrement() {
+  return { type: types.DECREMENT };
+}
app/components/counter.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+
+export default class Counter extends Component {
+  render() {
+    const { counter, increment, decrement } = this.props;
+    console.dir(this.props);
+    return (
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>{counter}</Text>
+        <TouchableOpacity onPress={increment}>
+          <Text>up</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={decrement}>
+          <Text>down</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
app/containers/app.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import * as reducers from '../reducers';
+import AwesomeApp from './awesome-app'
+
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const reducer = combineReducers(reducers);
+const store = createStoreWithMiddleware(reducer);
+
+export default class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <AwesomeApp />
+      </Provider>
+    );
+  }
+}
app/containers/awesome-app.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
+import Counter from '../components/counter';
+import * as counterActions from '../actions/counterActions';
+import { connect } from 'react-redux';
+
+class AwesomeApp extends Component {
+  render(){
+    const { state, actions } = this.props;
+    return (
+      <Counter counter={state.count} {...actions} />
+    );
+  }
+}
+
+export default connect(state => ({
+    state: state.counter
+  }),
+  (dispatch) => ({
+    actions: bindActionCreators(counterActions, dispatch)
+  })
+)(AwesomeApp);
app/reducers/counter.js
@@ -0,0 +1,22 @@
+import * as types from '../actions/actionTypes';
+
+const initialState = {
+  count: 0
+};
+
+export default function counter(state = initialState, action = {}) {
+  switch(action.type) {
+    case types.INCREMENT:
+      return {
+        ...state,
+        count: state.count + 1
+      };
+    case types.DECREMENT:
+      return {
+        ...state,
+        count: state.count - 1
+      };
+    default:
+      return state;
+  }
+}
app/reducers/index.js
@@ -0,0 +1,5 @@
+import counter from './counter'
+
+export {
+  counter
+};
index.android.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
 import { AppRegistry } from 'react-native';
-import ApplicationShell from './app/components/application-shell'
+import App from './app/containers/app'
 
-AppRegistry.registerComponent('AwesomeProject', () => ApplicationShell);
+AppRegistry.registerComponent('AwesomeProject', () => App);
package.json
@@ -10,6 +10,10 @@
     "react": "15.3.2",
     "react-native": "0.37.0",
     "react-native-config": "^0.1.2",
+    "react-redux": "^4.4.6",
+    "redux": "^3.6.0",
+    "redux-actions": "^1.1.0",
+    "redux-thunk": "^2.1.0",
     "tcomb-form-native": "^0.6.1"
   },
   "jest": {
yarn.lock
@@ -2202,6 +2202,10 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
+hoist-non-react-statics@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2332,7 +2336,7 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-invariant@^2.2.0:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -2981,6 +2985,10 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+lodash-es@^4.2.1:
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.2.tgz#59011b585166e613eb9dd5fc256b2cd1a30f3712"
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -3129,7 +3137,7 @@ lodash@^3.1.0, lodash@^3.10.1, lodash@^3.2.0, lodash@^3.3.1, lodash@^3.5.0, loda
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
 
@@ -3885,6 +3893,15 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
+react-redux@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
+  dependencies:
+    hoist-non-react-statics "^1.0.3"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    loose-envify "^1.1.0"
+
 react-test-renderer@15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.3.2.tgz#d8f083d37d2d41e97bbdc26a1dd9282f0baf7857"
@@ -3997,6 +4014,31 @@ redeyed@~1.0.0:
   dependencies:
     esprima "~3.0.0"
 
+reduce-reducers@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.2.tgz#fa1b4718bc5292a71ddd1e5d839c9bea9770f14b"
+
+redux-actions@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-1.1.0.tgz#df8ec791d9e267544e58a8ba2b72fc5c30afba3b"
+  dependencies:
+    invariant "^2.2.1"
+    lodash "^4.13.1"
+    reduce-reducers "^0.1.0"
+
+redux-thunk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98"
+
+redux@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d"
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.2"
+
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -4456,6 +4498,10 @@ supports-color@^3.1.0, supports-color@^3.1.2:
   dependencies:
     has-flag "^1.0.0"
 
+symbol-observable@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
 "symbol-tree@>= 3.1.0 < 4.0.0":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.1.4.tgz#02b279348d337debc39694c5c95f882d448a312a"