[#58] Context API를 Redux로 바꾸는 작업을 하라

Author: YONGJAE LEE

.eslintrc.js

@@ -6,6 +6,9 @@ module.exports = {
       },
     },
   },
+  globals: {
+    context: 'readonly',
+  },
   env: {
     amd: true,
     browser: true,

App.jsx

@@ -1,7 +1,7 @@
-import RootStackNavigator from './src/components/navigation/RootStackNavigator';
+import App from './src/App';
 
 const STORYBOOK_START = false;
 /* eslint-disable global-require */
 export default STORYBOOK_START ? require('./storybook').default
-  : RootStackNavigator;
+  : App;
 /* eslint-enable global-require */

package.json

@@ -23,6 +23,7 @@
     "@react-navigation/bottom-tabs": "^5.7.3",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.8.0",
+    "@reduxjs/toolkit": "^1.4.0",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
@@ -51,6 +52,9 @@
     "react-native-web": "~0.11.7",
     "react-native-webview": "9.4.0",
     "react-naver-maps": "^0.0.13",
+    "react-redux": "^7.2.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^5.1.1",
     "victory": "^35.0.8",
     "victory-native": "^35.0.1"
@@ -73,10 +77,12 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.7",
+    "flow-bin": "^0.134.0",
     "given2": "^2.1.7",
     "jest": "^26.1.0",
     "jest-expo": "^38.0.2",
-    "jest-plugin-context": "^2.9.0"
+    "jest-plugin-context": "^2.9.0",
+    "redux-mock-store": "^1.5.4"
   },
   "private": true
 }

src/App.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Provider } from 'react-redux';
+
+import store from './store';
+
+import RootStackNavigator from './components/navigation/RootStackNavigator';
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <RootStackNavigator />
+    </Provider>
+  );
+}

src/__mocks__/react-redux.js

@@ -0,0 +1,3 @@
+export const useDispatch = jest.fn();
+
+export const useSelector = jest.fn();

src/components/navigation/MainStackNavigator.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Button, Platform } from 'react-native';
 
 import { WebView } from 'react-native-webview';
@@ -11,9 +11,13 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { Fireworks } from 'fireworks/lib/react';
 
-import HomeTabNavigator from './HomeTabNavigator';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { toggleAuth } from '../../slice';
 
-import { AuthContext } from '../../contexts';
+import { get } from '../../utils';
+
+import HomeTabNavigator from './HomeTabNavigator';
 
 import { HeaderSide, HeaderTitle, HeaderTitleText } from './style';
 
@@ -32,7 +36,8 @@ function Test({ navigation }) {
 }
 
 export default function MainStackNavigator({ navigation }) {
-  const { toggleAuth, location } = useContext(AuthContext);
+  const dispatch = useDispatch();
+  const location = useSelector(get('location'));
 
   const [fireworks, setFireworks] = useState(false);
 
@@ -84,7 +89,7 @@ export default function MainStackNavigator({ navigation }) {
   );
 
   const headerRight = () => (
-    <HeaderSide onPress={() => toggleAuth()}>
+    <HeaderSide onPress={() => dispatch(toggleAuth())}>
       <Icon name="id-card" size={20} color={COLOR_PRIMARY} />
     </HeaderSide>
   );

src/components/navigation/RootStackNavigator.js

@@ -1,8 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { AuthContext } from '../../contexts';
+
+import { useSelector } from 'react-redux';
+
+import { get } from '../../utils';
 
 import SharedStatusBar from '../shared/SharedStatusBar';
 import MainStackNavigator from './MainStackNavigator';
@@ -13,53 +16,28 @@ import TermsScreen from '../screens/TermsScreen';
 const Stack = createStackNavigator();
 
 export default function RootStackNavigator() {
-  const [auth, setAuth] = useState(false);
-  const [location, setLocation] = useState({ x: 127.1054221, y: 37.3591614 });
-
-  const [profile, setProfile] = useState({
-    name: 'Test',
-    picture:
-      'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqj_WvMmoHaetb38rMQlE2wgH5Kj5ATh8XaA&usqp=CAU',
-  });
-
-  function toggleAuth() {
-    setAuth(!auth);
-  }
+  const auth = useSelector(get('auth'));
 
   return (
-    <AuthContext.Provider
-      value={{
-        auth,
-        toggleAuth,
-        location,
-        setLocation,
-        profile,
-        setProfile,
-      }}
-    >
-      <NavigationContainer>
-        <SharedStatusBar />
-        <Stack.Navigator
-          initialRouteName="LoginScreen"
-          screenOptions={{
-            animationEnabled: false,
-            headerShown: false,
-          }}
-        >
-          {auth ? (
-            <Stack.Screen name="Main" component={MainStackNavigator} />
-          ) : (
-            <>
-              <Stack.Screen name="LoginScreen" component={LoginScreen} />
-              <Stack.Screen
-                name="AuthCheckScreen"
-                component={AuthCheckScreen}
-              />
-              <Stack.Screen name="TermsScreen" component={TermsScreen} />
-            </>
-          )}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </AuthContext.Provider>
+    <NavigationContainer>
+      <SharedStatusBar />
+      <Stack.Navigator
+        initialRouteName="LoginScreen"
+        screenOptions={{
+          animationEnabled: false,
+          headerShown: false,
+        }}
+      >
+        {auth ? (
+          <Stack.Screen name="Main" component={MainStackNavigator} />
+        ) : (
+          <>
+            <Stack.Screen name="LoginScreen" component={LoginScreen} />
+            <Stack.Screen name="AuthCheckScreen" component={AuthCheckScreen} />
+            <Stack.Screen name="TermsScreen" component={TermsScreen} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }

src/components/screens/HomeScreen/HomeAnimalEnrollment.js

@@ -1,10 +1,12 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
 /* eslint-disable global-require */
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { TouchableOpacity } from 'react-native';
 
-import { AuthContext } from '../../../contexts';
+import { useDispatch } from 'react-redux';
+
+import { toggleAuth } from '../../../slice';
 
 import {
   AnimalEnrollmentContainter,
@@ -15,10 +17,10 @@ import {
 } from './style';
 
 export default function HomeAnimalEnrollment() {
-  const { toggleAuth } = useContext(AuthContext);
+  const dispatch = useDispatch();
 
   return (
-    <TouchableOpacity onPress={() => toggleAuth()}>
+    <TouchableOpacity onPress={() => dispatch(toggleAuth())}>
       <AnimalEnrollmentContainter>
         <AnimalEnrollImage source={require('../../assets/PetEnroll.png')} />
         <EnrollmentTextContainer>

src/components/screens/HomeScreen/index.js

@@ -1,9 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable global-require */
-// import React, { useState } from 'react';
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 
-// import { View, ScrollView } from 'react-native';
 import {
   Text,
   TouchableOpacity,
@@ -19,13 +17,14 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 
 import * as Location from 'expo-location';
 
-import { AuthContext } from '../../../contexts';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setLongtitude, setLatitude } from '../../../slice';
+import { get } from '../../../utils';
 
 import HomeAnimalEnrollment from './HomeAnimalEnrollment';
-// import HomeHospital from './HomeHospital';
 import HomeSearch from './HomeSearch';
 import HomeBanner from './HomeBanner';
-// import { HomeContainer, HomeHospitalText, Beta } from './style';
 
 import {
   NAVER_MAP_API_ID,
@@ -34,43 +33,11 @@ import {
 
 import { HomeContainer } from './style';
 
-// const DataOfNearbyHospital = [
-//   {
-//     name: '성심 동물 메디컬 센터',
-//     adress: '봉명동 548-11',
-//     phone: '042-719-7566',
-//     key: '1',
-//   },
-//   {
-//     name: '로얄 동물 펫병원',
-//     adress: '봉명동 669',
-//     phone: '042-823-7583',
-//     key: '2',
-//   },
-//   {
-//     name: '대전동물메디컬센터 숲',
-//     adress: '봉명동 664-3단지',
-//     phone: '042-826-7584',
-//     key: '3',
-//   },
-//   {
-//     name: '도안 ECO종합 동물 병원',
-//     adress: '11-13, 봉명서로',
-//     phone: '042-485-7582',
-//     key: '4',
-//   },
-//   {
-//     name: '피니펫 동물병원',
-//     adress: '어은동 105-7',
-//     phone: '042-862-7588',
-//     key: '5',
-//   },
-// ];
-
 export default function HomeScreen({ navigation }) {
-  const { location, setLocation, profile } = useContext(AuthContext);
+  const dispatch = useDispatch();
+  const location = useSelector(get('location'));
+  const profile = useSelector(get('profile'));
 
-  // const [location, setLocation] = useState({ x: 127.1054221, y: 37.3591614 });
   const [errorMsg, setErrorMsg] = useState(null);
   const [level, setLevel] = useState(6);
 
@@ -84,10 +51,12 @@ export default function HomeScreen({ navigation }) {
     const x = JSON.stringify(locationFrom.coords.longitude);
     const y = JSON.stringify(locationFrom.coords.latitude);
     if (x && y) {
-      setLocation({
+      dispatch(setLatitude({
         x,
+      }));
+      dispatch(setLongtitude({
         y,
-      });
+      }));
     }
     setLevel(13);
   }
@@ -149,7 +118,7 @@ export default function HomeScreen({ navigation }) {
             onPress={() => handleGetLocation()}
             style={{
               zIndex: 1,
-              position: 'absolute',
+              // position: 'absolute',
               paddingTop: 30,
               paddingRight: 20,
             }}