added orai

20250312/my-app/app/Counter.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { View, Text, Button, StyleSheet } from "react-native";
+import { CounterProvider, useCounter } from "./components/CounterContext";
+
+const CounterScreen = () => {
+    const {count, increment, decrement} = useCounter();
+
+    return (
+        <View>
+            <Text>
+                Számláló: {count}
+            </Text>
+            <Button title="Növelés" onPress={increment}></Button>
+            <Button title="Csökkentés" onPress={decrement}></Button>
+        </View>
+    );
+};
+
+export default CounterScreen;

20250312/my-app/app/_layout.tsx

@@ -1,5 +0,0 @@
-import { Stack } from "expo-router";
-
-export default function RootLayout() {
-  return <Stack />;
-}

20250312/my-app/app/components/CounterSlice.ts

@@ -0,0 +1,26 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+interface CounterState {
+    value: number;
+}
+
+const initialState: CounterState = {
+    value: 0,
+};
+
+const counterSlice = createSlice({
+    name: "counter",
+    initialState,
+    reducers: {
+        increment: (state) => {
+            state.value += 1;
+        },
+
+        decrement: (state) => {
+            state.value -= 1;
+        },
+    },
+});
+
+export const {increment, decrement} = counterSlice.actions;
+export default counterSlice.reducer;

20250312/my-app/app/components/Styles.tsx

@@ -0,0 +1,30 @@
+import {StyleSheet} from 'react-native'; 
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title:{
+      fontSize: 24,
+      fontWeight: "bold",
+      marginBottom: 20,
+    },
+    input: {
+      width: "80%",
+      borderWidth: 1,
+      borderColor: "#ccc",
+      padding: 10,
+      marginBottom: 20,
+      borderRadius: 5,
+      backgroundColor: "#ff00ff"
+    },
+    text: {
+      fontSize: 18,
+      marginBottom: 20,
+    },
+  });
+
+export default styles;

20250312/my-app/app/index.tsx

@@ -1,9 +1,29 @@
 import React, {useState} from 'react';
-import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
+import { View, Text, Button, TextInput, } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
-import { CounterProvider, useCounter } from './components/CounterContext';
+import CounterScreen from './Counter';
+import { CounterProvider } from './components/CounterContext'
+
+import styles from './components/Styles';
+
+import { RootState, AppDispatch, store } from './store/store';
+import { increment, decrement } from './components/CounterSlice';
+import { Provider, useDispatch, useSelector } from 'react-redux';
+
+const CounterScreen2 = () => {
+  const count = useSelector((state: RootState) => state.counter.value);
+  const dispatch = useDispatch();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Számláló: {count}</Text>
+      <Button title='Növelés' onPress={() => dispatch(increment())}></Button>
+      <Button title='Csökkentés' onPress={() => dispatch(decrement())}></Button>
+    </View>
+  );
+};
 
 const Stack = createStackNavigator();
 
@@ -38,38 +58,28 @@ const HomeScreen = ({ navigation }: any) => {
   );
 }
 
-const styles = StyleSheet.create({
+
-  container: {
-    flex: 1,
-    padding: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title:{
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 20,
-  },
-  input: {
-    width: "80%",
-    borderWidth: 1,
-    borderColor: "#ccc",
-    padding: 10,
-    marginBottom: 20,
-    borderRadius: 5,
-    backgroundColor: "#ff00ff"
-  },
-  text: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-});
 
 export default function Index() {
+  { /*}
   return(
     <Stack.Navigator>
       <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Kezdőlap"}}/>
       <Stack.Screen name="Details" component={DetailsScreen} options={{ title: "Részletek"}}/>
     </Stack.Navigator>
   ); 
+  */}
+  {/*}
+  return (
+    <CounterProvider>
+      <CounterScreen></CounterScreen>
+    </CounterProvider>
+  )
+  */}
+
+  return (
+    <Provider store={store}>
+      <CounterScreen2></CounterScreen2>
+    </Provider>
+  )
 }

20250312/my-app/app/store/store.ts

@@ -0,0 +1,11 @@
+import {configureStore} from "@reduxjs/toolkit";
+import counterReducer from "../components/CounterSlice";
+
+export const store = configureStore({
+    reducer: {
+        counter: counterReducer,
+    },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

20250312/my-app/package.json

@@ -19,6 +19,7 @@
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.15",
     "@react-navigation/stack": "^7.1.2",
+    "@reduxjs/toolkit": "^2.6.1",
     "expo": "~52.0.38",
     "expo-blur": "~14.0.3",
     "expo-constants": "~17.0.8",
@@ -40,7 +41,8 @@
     "react-native-screens": "~4.4.0",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

mobilfejlesztes.md

@@ -171,3 +171,13 @@ A context API 4 fő részből áll
 - Consumer (useContext()) - Az adatok elérésére szolgál
 - State kezelés (useState) - Az értékek dinamikus módosítására szolgál
 
+### Mi az a redux
+
+A redux egy globális állapotkezelő könyvtár, amely segít az adatok tárolásában és a komponensek közötti adatkommunikációban.
+
+Használata akkor előnyös, ha az alkalmazásban sok adatot kell kezelni.
+
+#### Csomagok telepítése
+
+`npm install @reduxjs/toolkit react-redux`
+