Commit 942f25e
Changed files (8)
app
actions
components
containers
reducers
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"