'v2.0.0'

App.js

@@ -1,5 +1,5 @@
 import { StatusBar } from "expo-status-bar";
-import React, { useReducer } from "react";
+import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useFonts } from "expo-font";
 import Colors from "./constants/Colors";
@@ -9,12 +9,11 @@ import { enableScreens } from "react-native-screens";
 // Navigation Packages
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-// Contexts
-import { reducerInitalState, ReducerContext } from "./contexts";
-import reducer from "./contexts/reducer";
+// React-Redux
+import { Provider } from "react-redux";
+import { store } from "./store/";
 // Screens and Icons
 import { Ionicons } from "@expo/vector-icons";
-import Favorites from "./screens/Favorites";
 import HomeAndProfileStack from "./components/HomeAndProfileStack";
 import FavoritesAndProfileStack from "./components/FavoritesAndProfileStack";
 // Navigators
@@ -23,8 +22,6 @@ const Tabs = createBottomTabNavigator();
 enableScreens();
 
 export default function App() {
-  const [state, dispatch] = useReducer(reducer, reducerInitalState);
-
   const [fontsLoaded] = useFonts({
     Quicksand: require("./assets/fonts/Quicksand-Regular.ttf"),
     "Quicksand-SB": require("./assets/fonts/Quicksand-SemiBold.ttf"),
@@ -33,7 +30,7 @@ export default function App() {
   if (!fontsLoaded) return <AppLoading />;
 
   return (
-    <ReducerContext.Provider value={{ state, dispatch }}>
+    <Provider store={store}>
       <NavigationContainer>
         <StatusBar style="light" translucent={true} />
 
@@ -102,7 +99,7 @@ export default function App() {
           />
         </Tabs.Navigator>
       </NavigationContainer>
-    </ReducerContext.Provider>
+    </Provider>
   );
 }
 

README.md

@@ -3,4 +3,4 @@
 This app fetches data from an api and displays breaking bad characters, which you can learn more about or add them to favorites.
 
 
-### Pull Requests will not be accepted, as I am new to react native, and will continue to push updates to this app by myself to learn more about react native.
+

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Breaking Bad App",
     "slug": "Breaking-Bad-App",
-    "version": "1.1.2",
+    "version": "2.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon1.png",
     "splash": {
@@ -29,7 +29,7 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "description": "",
+    "description": "The app where you can find, search, filter and favorite breaking bad characters.",
     "githubUrl": "https://github.com/developedbynick/breaking-bad-app"
   }
 }

components/Header.js

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 import { StyleSheet, TextInput, View } from "react-native";
 import Constants from "expo-constants";
-const Header = ({ filterCharacters }) => {
+import * as ACTIONS from "../store/actions";
+import { useDispatch } from "react-redux";
+const Header = () => {
   const [query, setQuery] = useState("");
+  const dispatch = useDispatch();
   const placeholderText = `Search For A Specific Character!`;
   const onChangeTextHandler = (text) => {
     setQuery(text);
-    filterCharacters(text);
+    dispatch({ type: ACTIONS.FILTER_CHARACTERS, query: text.trim() });
   };
   return (
     <View style={styles.header}>

components/HomeAndProfileStack.js

@@ -1,10 +1,8 @@
-import { TouchableOpacity, View, Text } from "react-native";
 import Home from "../screens/Home";
 import CharacterProfile from "../screens/CharacterProfile";
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import Colors from "../constants/Colors";
-import { Ionicons } from "@expo/vector-icons";
 import ProfileHeaderRight from "./ProfileHeaderRight";
 const Stack = createStackNavigator();
 

components/ProfileHeaderRight.js

@@ -1,34 +1,32 @@
-import React, { useState, useEffect, useContext } from "react";
-import { ReducerContext } from "../contexts";
-import { ACTIONS } from "../contexts/reducer";
+import React, { useState, useEffect } from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useSelector, useDispatch } from "react-redux";
+import * as ACTIONS from "../store/actions";
 const ProfileHeaderRight = ({ route }) => {
-  const context = useContext(ReducerContext);
-
+  const state = useSelector((state) => state);
+  const dispatch = useDispatch();
   const { character } = route.params;
   const { char_id } = character;
   const [starred, setStarred] = useState(false);
   const toggleStar = () => setStarred(!starred);
   useEffect(() => {
-    const isCharacterFavorited = context.state.favorites.some(
+    const isCharacterFavorited = state.favorites.some(
       (fav) => fav.char_id === char_id
     );
     if (isCharacterFavorited) setStarred(true);
     else setStarred(false);
-  }, [context.state.favorites.length]);
+  }, [state.favorites.length]);
 
   const toggleFavorites = () => {
     if (starred) {
       // If character is already starred, we should setStarred to false, and remove character from favorites
       toggleStar();
-      const newFavs = context.state.favorites.filter(
-        (fav) => fav.char_id !== char_id
-      );
-      context.dispatch({ type: ACTIONS.REMOVE_FAVORITE, newFavs });
+      const newFavs = state.favorites.filter((fav) => fav.char_id !== char_id);
+      dispatch({ type: ACTIONS.REMOVE_FAVORITE, newFavs });
     } else {
       toggleStar();
-      context.dispatch({ type: ACTIONS.ADD_FAVORITE, character });
+      dispatch({ type: ACTIONS.ADD_FAVORITE, character });
     }
   };
   return (