Added photos reducer.

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,47 +1,44 @@
-import * as FileSystem from "expo-file-system";
-import React, { useEffect, useState } from "react";
+import { Button, Text as NBText, Thumbnail, View } from "native-base";
+import React from "react";
 import { SafeAreaView, Text } from "react-native";
-import { Button, Text as NBText } from "native-base";
-export default function ScreenMediaCache() {
-  const [images, setImages] = useState([]);
-  useEffect(() => {
-    (async () => {
-      setImages(
-        (
-          await FileSystem.readDirectoryAsync(
-            FileSystem.documentDirectory + "photos"
-          )
-        ).map((f) => {
-          return {
-            uri: FileSystem.documentDirectory + "photos/" + f,
-            dimensions: { width: 2142, height: 4224 },
-          };
-        })
-      );
-    })();
-  }, []);
 
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { removeAllPhotos } from "../../redux/photos/photos.actions";
+import { selectPhotos } from "../../redux/photos/photos.selectors";
+const mapStateToProps = createStructuredSelector({
+  photos: selectPhotos,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  removeAllPhotos: () => dispatch(removeAllPhotos()),
+});
+
+export function ScreenMediaCache({ photos, removeAllPhotos }) {
   return (
     <SafeAreaView style={{ display: "flex", flex: 1 }}>
       <Text>This is the media cache screen.</Text>
-      <Button
-        block
-        onPress={async () => {
-          const fps = (
-            await FileSystem.readDirectoryAsync(
-              FileSystem.documentDirectory + "photos"
-            )
-          ).map((f) => {
-            return FileSystem.documentDirectory + "photos/" + f;
-          });
-          const all = [];
-          fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
-          await Promise.all(all);
-          console.log("All photos deleted.");
-        }}
-      >
+      <Button block onPress={() => removeAllPhotos()}>
         <NBText>Delete all</NBText>
       </Button>
+      <Text>{photos.length}</Text>
+      <View
+        style={{
+          flex: 1,
+          display: "flex",
+          direction: "row",
+          backgroundColor: "tomato",
+        }}
+      >
+        <Text>The View</Text>
+        {photos.map((i, idx) => (
+          <View>
+            <Text>{i.uri}</Text>
+            <Thumbnail square large key={idx} source={{ uri: i.uri }} />
+          </View>
+        ))}
+      </View>
     </SafeAreaView>
   );
 }
+export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);