new redux connect, deleteToken method, signOut

Author: TARTIGA

App.js

@@ -9,8 +9,7 @@ const AuthStack = createStackNavigator();
 const AppStack = createStackNavigator();
 const RootStack = createStackNavigator();
 
-
-import { connect } from 'react-redux';
+import { useSelector } from "react-redux";
 
 //don`t use expressions
 const AppStackScreen = () =>
@@ -25,13 +24,16 @@ const AuthStackScreen = () =>
     }} />
   </AuthStack.Navigator>
 
-const RootStackScreen = ({ userToken }) =>
-  <RootStack.Navigator headerMode="none">
-    {userToken ?
-      <RootStack.Screen name="App" component={AppStackScreen} /> :
-      <RootStack.Screen name="Auth" component={AuthStackScreen} />}
-  </RootStack.Navigator>
-
+const RootStackScreen = () => {
+  const userToken = useSelector(state => state.token);
+  return (
+    <RootStack.Navigator headerMode="none">
+      {userToken ?
+        <RootStack.Screen name="App" component={AppStackScreen} /> :
+        <RootStack.Screen name="Auth" component={AuthStackScreen} />}
+    </RootStack.Navigator>
+  )
+}
 
 const App = () => {
   return (
@@ -43,4 +45,4 @@ const App = () => {
   );
 }
 
-export default App;
+export default App

actions/index.js

@@ -1,4 +1,4 @@
-import { GET_TOKEN } from '../reducers/constants'
+import { GET_TOKEN, DELETE_TOKEN } from '../reducers/constants'
 
 export function getToken() {
     return {
@@ -9,4 +9,12 @@ export function getToken() {
             }
         }
     };
+}
+
+export function deleteToken() {
+    return {
+        type: DELETE_TOKEN,
+        payload: {
+        }
+    };
 }

reducers/constants.js

@@ -1,3 +1,6 @@
 export const GET_TOKEN = 'GET_TOKEN';
 export const GET_TOKEN_SUCCESS = 'GET_TOKEN_SUCCESS';
 export const GET_TOKEN_FAIL = 'GET_TOKEN_FAIL';
+
+export const DELETE_TOKEN = 'DELETE_TOKEN';
+

reducers/index.js

@@ -1,4 +1,4 @@
-import { GET_TOKEN, GET_TOKEN_SUCCESS, GET_TOKEN_FAIL } from './constants'
+import { GET_TOKEN, GET_TOKEN_SUCCESS, GET_TOKEN_FAIL, DELETE_TOKEN } from './constants'
 
 export default function reducer(state = { token: null }, action) {
     switch (action.type) {
@@ -12,6 +12,11 @@ export default function reducer(state = { token: null }, action) {
                 loading: false,
                 error: 'Error while fetching account'
             };
+        case DELETE_TOKEN:
+            return {
+                ...state,
+                token: null,
+            };
         default:
             return state;
     }

screens/AutorizationScreen.jsx

@@ -1,19 +1,21 @@
 import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from "react-redux";
 import styled from 'styled-components/native'
 import { Text, Alert } from 'react-native'
 import { Link, CustomTextInput, Button } from '../components'
 import WaterfallImage from '../assets/waterfall.svg'
 import SvgUri from 'react-native-svg-uri';
-
-import { connect } from 'react-redux';
 import { getToken } from '../actions';
 
 
-const AutorizationScreen = ({ getToken, token, navigation }) => {
+const AutorizationScreen = ({ navigation }) => {
     const [login, setLogin] = useState('');
     const [password, setPassword] = useState('');
     const [isSending, setIsSending] = useState(false)
 
+    const token = useSelector(state => state.token);
+    const dispatch = useDispatch();
+
     const showAlert = (title = 'RESPONSE', data) => {
         Alert.alert(
             `${title}`,
@@ -33,7 +35,7 @@ const AutorizationScreen = ({ getToken, token, navigation }) => {
         const getTokenRequest = async () => {
             if (isSending) {
                 try {
-                    await getToken();
+                    dispatch(getToken())
                 } catch (error) {
                     showAlert('ERROR', error)
                 } finally {
@@ -115,15 +117,5 @@ text-align:center;
 font-size: 12;
 `;
 
-const mapStateToProps = state => {
-    return {
-        token: state.token
-    };
-};
-const mapDispatchToProps = {
-    getToken
-};
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(AutorizationScreen);
+export default AutorizationScreen;
 

screens/HomeScreen.jsx

@@ -3,14 +3,17 @@ import styled from 'styled-components/native'
 import { Text } from 'react-native'
 import { Button } from '../components'
 
-const signOut = () => {
-    // delete token action
-}
+import { deleteToken } from '../actions';
+import { useDispatch, useSelector } from "react-redux";
+
 const HomeScreen = ({ navigation }) => {
+    const token = useSelector(state => state.token);
+    const dispatch = useDispatch();
     return (
         <Container>
             <Text>HomeScreen</Text>
-            <Button handler={() => signOut()} >
+            <Text>Token = {token}</Text>
+            <Button handler={() => dispatch(deleteToken())} >
                 <Text>Sign Out</Text>
             </Button>
         </Container>