Correcting bug in thunk

components/KanjiCard.tsx

@@ -25,7 +25,6 @@ const KanjiCard = (props: KanjiProps) => {
         }
     }
 
-    const [loading, setLoading] = useState(true);
     const [kanji, setKanji] = useState((): Kanji | null => { return null });
     const [imgXml, setImgXml] = useState('<svg></svg>');
 
@@ -35,14 +34,7 @@ const KanjiCard = (props: KanjiProps) => {
     const allKanjis: Kanji[] = [].concat(...Object.values(kanjis))
     const selectedKanji = allKanjis[Math.floor(Math.random() * allKanjis.length)]
 
-    const fetchData = async () => {
-        await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${props.kanji}`, options)
-            .then(async response => {
-                const data = await response.json()
-                setKanji(KanjiMapper.ApiJsonToKanji(data));
-            })
-            .catch(err => console.log(err));
-    }
+
 
     const fetchXml = async () => {
         if (kanji) {
@@ -52,38 +44,30 @@ const KanjiCard = (props: KanjiProps) => {
     }
 
     useEffect(() => {
-        setLoading(true);
-        fetchData().then(_ => {
-            setKanji(selectedKanji);
-            setLoading(false);
-        });
+        setKanji(selectedKanji);
     }, []);
 
     useEffect(() => {
-        setLoading(true);
         fetchXml().then(_ => {
-            setLoading(false);
         });
     }, [kanji]);
 
     return (
         <View style={kanjiCardStyle.container}>
 
-            <Text style={kanjiCardStyle.text}> {loading ? <Text>Loading...</Text> : <Text>{kanji?.onyomi}</Text>}</Text>
-            {!loading && (
+            <Text style={kanjiCardStyle.text}>{kanji?.onyomi}</Text>
                 <SvgXml
                     xml={imgXml
                         .replace(/fill="#[0-9a-f]{6}"/g, `fill=${kanjiCardStyle.svg.color}`)}
                     width="200"
                     height="200"
                 />
-            )}
-            <Text style={kanjiCardStyle.text}> {loading ? <Text /> : <Text>{kanji?.meaning}</Text>}</Text>
+            <Text style={kanjiCardStyle.text}>{kanji?.meaning}</Text>
             <KanjiAnswerField />
             <Button title="OK" color="#FF5C5C" />
         </View>
     );
-};
+}; 
 
 const kanjiCardStyle_light = StyleSheet.create({
     svg: {

navigation/Startup.tsx

@@ -40,7 +40,7 @@ export default function Startup() {
 
     const init = async () => {
         
-        await dispatch(await fetchKanjis());
+        await (await fetchKanjis())(dispatch);
         //await new Promise(resolve => setTimeout(resolve, 5000));
         navigator.navigate("Main");
     }

redux/actions/setKanjis.ts

@@ -1,8 +1,7 @@
-import { Kanji } from '../../model/kanji';
 import { SET_KANJIS } from '../constants';
 import { KanjiListByGrade } from '../../model/kanjiListByGrades';
 
-export const setKanjis = (kanjis: kanjiListByGrade) => {
+export const setKanjis = (kanjis: KanjiListByGrade) => {
     return {
         type: SET_KANJIS,
         payload: kanjis,

redux/reducers/kanjiReducer.ts

@@ -11,9 +11,11 @@ export default function kanjiReducer(state = initialState, action) {
     switch (action.type) {
         case c.SET_KANJIS:
             // @ts-ignore
+            console.log("SET KANJIS");
             return { ...state, kanjis: action.payload };
         case c.SET_SELECTED_KANJI:
             // @ts-ignore
+            console.log("SET SELECTED");
             return { ...state, selectedKanji: action.payload };
         default:
             return state;

redux/store.ts

@@ -10,6 +10,10 @@ const reducer = {
 const store = configureStore(
 	{
 		reducer,
+		middleware: [createSerializableStateInvariantMiddleware({
+			ignoredActions: ["SET_KANJIS", "SET_SELECTED_KANJI"],
+			ignoreActions: true
+		})]
 	},);
 
 export default store;

redux/thunks/fetchKanjis.ts

@@ -1,3 +1,4 @@
+import { useDispatch } from 'react-redux';
 import { initKanjiListByGrade, KanjiListByGrade } from '../../model/kanjiListByGrades';
 import { KanjiMapper } from '../../model/kanjiMapper';
 import { setKanjis } from '../actions/setKanjis';
@@ -18,7 +19,7 @@ export const fetchKanjis = async () => {
     const fetchData = async (grade: string) => {
         return fetch(`https://kanjialive-api.p.rapidapi.com/api/public/search/advanced/?grade=${grade}`, options)
     }
-    return async dispatch => {
+    return async (dispatch) => {
         const fetchAll = async () => {
             for (let i = 1; i <= 6; i++) {
                 await fetchData(i.toString()).then(async (response) => {