Commit 942f25e

mo khan <mo@mokhan.ca>
2016-11-28 04:01:46
use redux to implement a async action.
1 parent 86c5b26
app/actions/actionTypes.js
@@ -1,2 +1,3 @@
 export const INCREMENT = 'INCREMENT';
 export const DECREMENT = 'DECREMENT';
+export const RECEIVED_MOVIES = 'RECEIVED_MOVIES';
app/actions/counterActions.js
@@ -1,4 +1,5 @@
 import * as types from './actionTypes';
+import Api from '../infrastructure/api';
 
 export function increment() {
   return { type: types.INCREMENT };
@@ -7,3 +8,18 @@ export function increment() {
 export function decrement() {
   return { type: types.DECREMENT };
 }
+
+export function fetchMovies() {
+  return dispatch => {
+    var url = 'https://facebook.github.io/react-native/movies.json'
+    new Api(url).get((json) => dispatch(receiveMovies(json)));
+  };
+}
+
+export function receiveMovies(json) {
+  return {
+    type: types.RECEIVED_MOVIES,
+    movies: json.movies.map((item) => item.title),
+    receivedAt: Date.now()
+  }
+}
app/components/counter.js
@@ -3,8 +3,10 @@ import { View, Text, TouchableOpacity } from 'react-native';
 
 export default class Counter extends Component {
   render() {
-    const { counter, increment, decrement } = this.props;
+    const { counter, increment, decrement, fetchMovies } = this.props;
+    console.log("PROPS");
     console.dir(this.props);
+    let moviesCount = this.props.movies ? this.props.movies.length : 0;
     return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>{counter}</Text>
@@ -14,6 +16,9 @@ export default class Counter extends Component {
         <TouchableOpacity onPress={decrement}>
           <Text>down</Text>
         </TouchableOpacity>
+        <TouchableOpacity onPress={fetchMovies}>
+          <Text>Async {moviesCount}</Text>
+        </TouchableOpacity>
       </View>
     );
   }
app/containers/app.js
@@ -4,8 +4,9 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import * as reducers from '../reducers';
 import AwesomeApp from './awesome-app'
+import logger from 'redux-logger';
 
-const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const createStoreWithMiddleware = applyMiddleware(thunk, logger())(createStore);
 const reducer = combineReducers(reducers);
 const store = createStoreWithMiddleware(reducer);
 
app/containers/awesome-app.js
@@ -8,7 +8,7 @@ class AwesomeApp extends Component {
   render(){
     const { state, actions } = this.props;
     return (
-      <Counter counter={state.count} {...actions} />
+      <Counter counter={state.count} movies={state.movies} {...actions} />
     );
   }
 }
app/reducers/counter.js
@@ -16,6 +16,11 @@ export default function counter(state = initialState, action = {}) {
         ...state,
         count: state.count - 1
       };
+    case types.RECEIVED_MOVIES:
+      return {
+        ...state,
+        movies: action.movies,
+      };
     default:
       return state;
   }
package.json
@@ -13,6 +13,7 @@
     "react-redux": "^4.4.6",
     "redux": "^3.6.0",
     "redux-actions": "^1.1.0",
+    "redux-logger": "^2.7.4",
     "redux-thunk": "^2.1.0",
     "tcomb-form-native": "^0.6.1"
   },
yarn.lock
@@ -1418,6 +1418,10 @@ decompress@^3.0.0:
     vinyl-assign "^1.0.1"
     vinyl-fs "^2.2.0"
 
+deep-diff@0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.4.tgz#aac5c39952236abe5f037a2349060ba01b00ae48"
+
 deep-extend@^0.4.0, deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
@@ -4026,6 +4030,12 @@ redux-actions@^1.1.0:
     lodash "^4.13.1"
     reduce-reducers "^0.1.0"
 
+redux-logger@^2.7.4:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-2.7.4.tgz#891e5d29e7f111d08b5781a237b9965b5858c7f8"
+  dependencies:
+    deep-diff "0.3.4"
+
 redux-thunk@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98"