Browse Source

[+Jordi] Add increment functionality using Redux

Elisa Cutrin 1 year ago
parent
commit
9fcf803b11

+ 6 - 3
App.js

@@ -1,4 +1,5 @@
1 1
 import React from 'react';
2
+import { Provider } from 'react-redux';
2 3
 import {
3 4
   NavigationContext,
4 5
   NavigationProvider,
@@ -15,9 +16,11 @@ const navigationContext = new NavigationContext({
15 16
 export default class App extends React.Component {
16 17
   render() {
17 18
     return (
18
-      <NavigationProvider context={navigationContext}>
19
-        <StackNavigation initialRoute={Router.getRoute('hello')} />
20
-      </NavigationProvider>
19
+      <Provider store={Store}>
20
+        <NavigationProvider context={navigationContext}>
21
+          <StackNavigation initialRoute={Router.getRoute('hello')} />
22
+        </NavigationProvider>
23
+      </Provider>
21 24
     );
22 25
   }
23 26
 };

+ 1 - 1
Router.js

@@ -1,6 +1,6 @@
1 1
 import {Hello} from "./screens/hello";
2 2
 import {createRouter} from "@expo/ex-navigation/src/ExNavigation";
3
-import {World} from "./screens/world";
3
+import World from "./screens/world";
4 4
 
5 5
 const Router = createRouter(() => ({
6 6
   hello: () => Hello,

+ 6 - 0
application/redux/actions/actions.js

@@ -0,0 +1,6 @@
1
+
2
+export function increment() {
3
+  return {
4
+    type: 'increment',
5
+  };
6
+}

+ 13 - 0
application/redux/reducers/reducers.js

@@ -0,0 +1,13 @@
1
+const defaultState = {value: 0};
2
+
3
+export default function incrementReducer (state = defaultState, action) {
4
+  switch (action.type) {
5
+    case 'increment':
6
+      const currentValue = state.value;
7
+      return {
8
+        value: currentValue + 1,
9
+      };
10
+    default:
11
+      return state;
12
+  }
13
+}

+ 2 - 0
application/redux/store.js

@@ -1,5 +1,6 @@
1 1
 import { createNavigationEnabledStore, NavigationReducer } from '@expo/ex-navigation';
2 2
 import { combineReducers, createStore } from 'redux';
3
+import incrementReducer from './reducers/reducers'
3 4
 
4 5
 const createStoreWithNavigation = createNavigationEnabledStore({
5 6
   createStore,
@@ -10,6 +11,7 @@ const Store = createStoreWithNavigation(
10 11
   /* combineReducers and your normal create store things here! */
11 12
   combineReducers({
12 13
     navigation: NavigationReducer,
14
+    increment: incrementReducer,
13 15
     // other reducers
14 16
   })
15 17
 );

+ 36 - 3
screens/world.js

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