Require cycle: App.tsx -> Store/Reducers/Projects.js -> Store/Actions/Projects.js -> App.tsx - firebase

Question

Require cycle: App.tsx -> Store/Reducers/Projects.js -> Store/Actions/Projects.js -> App.tsx
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
at node_modules/metro-runtime/src/polyfills/require.js:117:6 in metroRequire
at http://192.168.1.6:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:177107:24 in <unknown>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/redux-thunk/lib/index.js:18:6 in <anonymous>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at http://192.168.1.6:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:117971:52 in <unknown>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/expo/AppEntry.js:3:0 in <global>
- ... 4 more stack frames from framework internals
I think My problem is with the way, I am initialising and exporting firestore and firebase realtime database.
when my app starts it reaches App.tsx and from their it goes to Store/Reducers/Projects.js to initialise and fetch the redux-store from their it goes to Store/Actions/Projects.js to dispatch the actions.
now the problem here is in Store/Actions/Projects.js it imports firestore and realtime database from App.tsx. Because of this I think it's causing Cycle. Am i correct? can any one please help me out and refactor it so that the cycle brakes.
here In App.tsx I first initiate firebase, firestore and realtime database.
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const RealtimeDB = getDatabase(app);
and in Store/Actions/Projects.js I am importing it as
import { db, RealtimeDB } from "../../App";
I assume the problem is in the way I initialise firebase and export it. And I also think there is a problem with import statements. Whole code is provided below.
my App.tsx code
import { useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaProvider } from "react-native-safe-area-context";
//import { useColorScheme } from "react-native-appearance";
import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";
import { ThemeProvider } from "react-native-elements";
// redux imports
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import Allprojects from "./Store/Reducers/Projects";
//firebase config
**import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import AuthScreen from "./screens/AuthenticatonScreens/AuthScreen";**
const firebaseConfig = {****};
**const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const RealtimeDB = getDatabase(app);**
const RootReducers = combineReducers({
Projects: Allprojects,
});
const store = createStore(RootReducers, applyMiddleware(ReduxThunk));
export default function App() {
const [isSigned, setisSigned] = useState(false);
const [isLoding, setisLoding] = useState(false);
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const auth = getAuth();
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
const uid = user.uid;
setisSigned(true);
} else {
setisSigned(false);
}
});
});
if (!isLoadingComplete) {
return null;
} else {
return (
<Provider store={store}>
<SafeAreaProvider>
<ThemeProvider useDark={colorScheme === "dark"}>
{isSigned == false ? (
<AuthScreen />
) : (
<Navigation colorScheme={colorScheme} />
)}
<StatusBar />
</ThemeProvider>
</SafeAreaProvider>
</Provider>
);
}
}
my Store/Reducers/Projects.js file
import {
RETRIVING_PROJECT,
RETRIVING_PROJECT_TASKS,
} from "../Actions/Projects";
const initialstate = {
ProjectsInvoledIn: [],
ProjectTasks: [],
};
export default (state = initialstate, action) => {
switch (action.type) {
case RETRIVING_PROJECT:
return {
...state,
ProjectsInvoledIn: action.payload,
};
case RETRIVING_PROJECT_TASKS:
return { ...state, ProjectTasks: action.payload };
}
return state;
};
my Store/Actions/Projects.js file
export const RETRIVING_PROJECT = "RETRIVING_PROJECT";
import { db, RealtimeDB } from "../../App";
import {
writeBatch,
doc,
onSnapshot,
query,
orderBy,
serverTimestamp,
addDoc,
collection,
} from "firebase/firestore";
import {
ref,
set,
onValue,
push,
serverTimestamp as DbSer,
} from "firebase/database";
import { UserIds } from "../../UserIds";
import { getAuth } from "firebase/auth";
import { nanoid } from "nanoid/non-secure";
// CREATING PROJECTS
export const CreateProject = () => { ....my writing and fetching data functions... }

Answer 1

You can put those firebase related functions in different file, then import from that file instead of app.js.