Browse Source

[+Jordi] 125 - Added thunk to make an external code

Elisa Cutrin 1 year ago
parent
commit
4f46e56558

+ 30 - 0
redux-sample/application/redux/actions/actions.js

@@ -1,4 +1,34 @@
1 1
 
2
+function fetchIp() {
3
+  return fetch('http://ip.jsontest.com/').then((response) => response.json());
4
+}
5
+
6
+function setIp(ip) {
7
+  return {
8
+    type: 'set_ip',
9
+    value: ip,
10
+  }
11
+}
12
+
13
+// We could do this to show a spinner or something
14
+function loadingIp() {
15
+  return {
16
+    type: 'loading_ip',
17
+  }
18
+}
19
+
20
+export function getIp() {
21
+  return function(dispatch) {
22
+    dispatch(loadingIp());
23
+    return fetchIp().then(
24
+      response => {
25
+        const ip = response.ip;
26
+        dispatch(setIp(ip))
27
+      }
28
+    );
29
+  }
30
+}
31
+
2 32
 export function increment() {
3 33
   return {
4 34
     type: 'increment',

+ 13 - 2
redux-sample/application/redux/reducers/reducers.js

@@ -1,6 +1,5 @@
1
-const defaultState = {value: 0};
2 1
 
3
-export default function incrementReducer (state = defaultState, action) {
2
+export function incrementReducer (state = {value: 0}, action) {
4 3
   switch (action.type) {
5 4
     case 'increment':
6 5
       const currentValue = state.value;
@@ -10,4 +9,16 @@ export default function incrementReducer (state = defaultState, action) {
10 9
     default:
11 10
       return state;
12 11
   }
12
+}
13
+
14
+export function ipReducer (state = {value: "127.0.0.0"}, action) {
15
+  switch(action.type) {
16
+    case 'set_ip':
17
+      const currentValue = action.value;
18
+      return {
19
+        value: currentValue,
20
+      };
21
+    default:
22
+    return state;
23
+  }
13 24
 }

+ 7 - 3
redux-sample/application/redux/store.js

@@ -1,9 +1,12 @@
1 1
 import { createNavigationEnabledStore, NavigationReducer } from '@expo/ex-navigation';
2
-import { combineReducers, createStore } from 'redux';
3
-import incrementReducer from './reducers/reducers'
2
+import { combineReducers, createStore, applyMiddleware } from 'redux';
3
+import {incrementReducer, ipReducer} from './reducers/reducers'
4
+import thunk from 'redux-thunk';
5
+
6
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
4 7
 
5 8
 const createStoreWithNavigation = createNavigationEnabledStore({
6
-  createStore,
9
+  createStore: createStoreWithMiddleware,
7 10
   navigationStateKey: 'navigation',
8 11
 });
9 12
 
@@ -12,6 +15,7 @@ const Store = createStoreWithNavigation(
12 15
   combineReducers({
13 16
     navigation: NavigationReducer,
14 17
     increment: incrementReducer,
18
+    ip: ipReducer
15 19
     // other reducers
16 20
   })
17 21
 );

+ 6 - 0
redux-sample/package-lock.json

@@ -9307,6 +9307,12 @@
9307 9307
         "deep-diff": "0.3.4"
9308 9308
       }
9309 9309
     },
9310
+    "redux-thunk": {
9311
+      "version": "2.2.0",
9312
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.2.0.tgz",
9313
+      "integrity": "sha1-5hWhbha0ehmlFXZhM9Hj6Zt4UuU=",
9314
+      "dev": true
9315
+    },
9310 9316
     "regenerate": {
9311 9317
       "version": "1.3.3",
9312 9318
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",

+ 3 - 2
redux-sample/package.json

@@ -3,9 +3,10 @@
3 3
   "version": "0.1.0",
4 4
   "private": true,
5 5
   "devDependencies": {
6
-    "react-native-scripts": "1.13.1",
7 6
     "jest-expo": "26.0.0",
8
-    "react-test-renderer": "16.3.0-alpha.1"
7
+    "react-native-scripts": "1.13.1",
8
+    "react-test-renderer": "16.3.0-alpha.1",
9
+    "redux-thunk": "^2.2.0"
9 10
   },
10 11
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
11 12
   "scripts": {

+ 12 - 9
redux-sample/screens/world.js

@@ -1,6 +1,6 @@
1 1
 import React from 'react';
2 2
 import { connect } from 'react-redux';
3
-import {increment} from '../application/redux/actions/actions';
3
+import {increment, getIp} from '../application/redux/actions/actions';
4 4
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
5 5
 
6 6
 class World extends React.Component {
@@ -9,21 +9,21 @@ class World extends React.Component {
9 9
     super(props)
10 10
   }
11 11
 
12
-  increment = () => {
13
-    this.props.increment();
14
-  };
15
-
16 12
   render() {
17 13
     // get the prop of value
18 14
     const value = this.props.value;
15
+    const ip = this.props.ip;
19 16
 
20 17
     return (
21 18
       <View style={styles.container}>
22
-        <Text>World! {value}</Text>
23
-
24
-        <TouchableOpacity onPress={this.increment} >
19
+        <Text>{value}</Text>
20
+        <Text>{ip}</Text>
21
+        <TouchableOpacity onPress={this.props.increment} >
25 22
           <Text>Increment</Text>
26 23
         </TouchableOpacity>
24
+        <TouchableOpacity onPress={this.props.getIp} >
25
+          <Text>Get IP</Text>
26
+        </TouchableOpacity>
27 27
       </View>
28 28
     );
29 29
   }
@@ -41,13 +41,16 @@ const styles = StyleSheet.create({
41 41
 
42 42
 const mapStateToProps = (state) => {
43 43
   return {
44
-    value: state.increment.value
44
+    value: state.increment.value,
45
+    ip: state.ip.value
46
+
45 47
   };
46 48
 };
47 49
 
48 50
 const mapDispatchToProps = (dispatch) => {
49 51
   return {
50 52
     increment: () => { dispatch(increment()); },
53
+    getIp: () => { dispatch(getIp()); }
51 54
   };
52 55
 };
53 56