Merge pull request #1 from coolguyzone/redux

Get basic redux store functionality running

Author: coolguyzone

App.js

@@ -12,6 +12,8 @@ import BeerAndWineBoozeTab from "./Screens/IngredientsTabs/BeerAndWineTab";
 import MixersTab from "./Screens/IngredientsTabs/MixersTab";
 import ProduceTab from "./Screens/IngredientsTabs/ProduceTab";
 import { Ionicons } from "@expo/vector-icons";
+import store from "./src/app/store";
+import { Provider } from 'react-redux';
 
 
 const Drawer = createDrawerNavigator();
@@ -60,7 +62,7 @@ function IngredientsTabNavigator() {
 
 export default function App() {
   return (
-    <>
+    <Provider store={store}>
       <NavigationContainer>
         <Drawer.Navigator initialRouteName="Home">
           <Drawer.Screen name="Home" component={HomeScreen} />
@@ -71,7 +73,7 @@ export default function App() {
           <Drawer.Screen name="Recipes" component={RecipesScreen} />
         </Drawer.Navigator>
       </NavigationContainer>
-    </>
+    </Provider>
   );
 }
 

Screens/IngredientsTabs/LightBoozeTab.js

@@ -1,17 +1,39 @@
 import { useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Button, StyleSheet, Text, View } from "react-native";
 import CheckBox from "react-native-check-box";
 import IngredientCheckBox from "../../components/IngredientCheckBox";
 import { Constants } from "../../util/constants";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  addIngredient,
+  ingredientsArray,
+} from "../../util/slices/inventorySlice";
 
 function LightBoozeTab() {
+  const ingredients = useSelector((state) => state.inventory);
+  const dispatch = useDispatch();
+  // dispatch(inventory.addIngredient('bourbon'))
+  console.log('addIngredient', addIngredient),
+  console.log('ingredients', ingredients)
+
+
+
   return (
     <>
       <Text style={{ marginTop: 20 }}>Light Booze</Text>
       <View style={styles.IngredientContainer}>
         {Constants.clearDrinks.map((drink) => {
-         return <IngredientCheckBox key={drink}>{drink}</IngredientCheckBox>
+          return <IngredientCheckBox key={drink}>{drink}</IngredientCheckBox>;
         })}
+        <Button
+          title="test"
+          onPress={() => {
+            console.log("clicked");
+            console.log('ingredients2', ingredients)
+            return dispatch(addIngredient("bourbon"));
+          }}
+        ></Button>
+        <Text>WHat's up!!! {useSelector(ingredientsArray)}</Text>
       </View>
     </>
   );

package-lock.json

@@ -12,13 +12,15 @@
     "@react-native-community/checkbox": "^0.5.17",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/drawer": "^6.6.6",
+    "@reduxjs/toolkit": "^2.1.0",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-check-box": "^2.1.7",
     "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0"
+    "react-native-reanimated": "~3.3.0",
+    "react-redux": "^9.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

package.json

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit'
+import inventoryReducer from '../../util/slices/inventorySlice'
+
+export default configureStore({
+  reducer: {
+    inventory: inventoryReducer,
+  },
+})

src/app/store.js

@@ -0,0 +1,19 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const inventorySlice = createSlice({
+  name: "inventory",
+  initialState: {
+    ingredientsArray: ['water'],
+  },
+  reducers: {
+    addIngredient: (state, action) => {
+      console.log('addIngredient')
+      state.ingredientsArray.push(action.payload);
+    },
+  },
+});
+
+export const { addIngredient }  = inventorySlice.actions;
+export const ingredientsArray = (state) => state.inventory.ingredientsArray;
+
+export default inventorySlice.reducer;