Finalizando estrutura inicial do Redux e Redux Persist #2

frontend/App.tsx

@@ -1,13 +1,24 @@
-import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet
+} from 'react-native';
+import { Provider } from 'react-redux';
+
+import { store, persistor } from './src/store';
+
+import { PersistGate } from 'redux-persist/integration/react';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <View style={styles.container}>
+          <Text>Open up App.tsx to start working on your app!</Text>
+        </View>
+      </PersistGate>
+    </Provider>
   );
 }
 

frontend/package.json

@@ -8,13 +8,17 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.15.4",
     "axios": "^0.21.1",
     "expo": "~41.0.1",
     "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
-    "react-native-web": "~0.13.12"
+    "react-native-web": "~0.13.12",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.0",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

frontend/src/store/index.ts

@@ -0,0 +1,16 @@
+import { createStore } from 'redux';
+import rootReducer from './reducers/rootReducer';
+import { persistStore, persistReducer} from 'redux-persist';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const persistConfig = {
+  key: 'root',
+  storage: AsyncStorage,
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = createStore(persistedReducer);
+const persistor = persistStore(store);
+
+export { store, persistor };

frontend/src/store/reducers/auth/actions.ts

@@ -0,0 +1,11 @@
+interface Tokens {
+    accessToken: string
+    refreshToken: string
+}
+
+export const SetTokens = (tokens: Tokens) => {
+    return {
+      type: '@auth/SET_TOKEN',
+      payload: { tokens }
+    }
+}

frontend/src/store/reducers/auth/reducer.ts

@@ -0,0 +1,20 @@
+const INITIAL_STATE = {
+    accessToken: '',
+    refreshToken: ''
+};
+
+const auth = (state = INITIAL_STATE, action: any) => {
+    const baseAction = '@auth/';
+    switch (action.type) {
+        case `${baseAction}SET_TOKEN`:
+            return {
+                ...state,
+                accessToken: action.payload.auth.accessToken || "",
+                refreshToken: action.payload.auth.refreshToken || ""
+            };
+        default:
+            return state;
+    }
+}
+
+export default auth;

frontend/src/store/reducers/rootReducer.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+
+import auth from './auth/reducer';
+import user from './user/reducer';
+
+const rootReducer = combineReducers({
+    auth,
+    user
+});
+
+export default rootReducer;

frontend/src/store/reducers/user/actions.ts

@@ -0,0 +1,12 @@
+export function setUser(user: any) {
+    return {
+        type: '@user/SET_USER',
+        payload: { user },
+    };
+}
+
+export function clearUser() {
+    return {
+        type: '@user/CLEAR_USER'
+    };
+}

frontend/src/store/reducers/user/reducer.ts

@@ -0,0 +1,22 @@
+const INITIAL_STATE = {
+    name: ""
+};
+
+const user = (state = INITIAL_STATE, action: any) => {
+    const baseAction = '@user/';
+    switch (action.type) {
+
+        case `${baseAction}SET_USER`:
+            return {
+                ...state, ...action.payload.user
+            }
+        case `${baseAction}CLEAR_USER`:
+            return {
+                ...state, ...INITIAL_STATE
+            }
+        default:
+            return state;
+    }
+}
+
+export default user;