İlan 3 — React Native Mobile
İlan 3 · İlan 3

React Native — Redux, Hooks, mağaza yayınlama

Burada en güçlü olduğun ilan — Collabry'deki 3 React Native/Expo projeni (Şantiye Defteri, TYS, What Is Your Mood 2) somut örnek olarak kullan. Eksik olan kısımlar: Redux, store yayınlama süreci, Azure DevOps/Bitbucket.

Redux, RN'de web'den farklı mı?

Hayır — Redux/RTK sayfasındaki aynı createSlice /useSelector / useDispatch mantığı birebir React Native'de de çalışır. Tek fark: state'i cihaza kalıcı kaydetmek istediğinde localStorage yerine AsyncStorage kullanırsın.

store.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
import { persistStore, persistReducer } from "redux-persist";

const persistConfig = { key: "root", storage: AsyncStorage, whitelist: ["sepet"] };
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({ reducer: persistedReducer });
export const persistor = persistStore(store);
// Uygulama kapatılıp açılsa bile "sepet" state'i AsyncStorage'dan geri yüklenir.

React Hooks — ilanın ayrıca saydığı konu

En sık sorulan pattern: veri çekme + cleanup. useEffect'in return'ünde dönen fonksiyon, component unmount olduğunda veya dependency değiştiğinde çalışır — "component kaldırıldıktan sonra state güncelleme" hatasını (React uyarısı) önler.

function useFatura(musteriId: string) {
  const [fatura, setFatura] = useState<Fatura | null>(null);
  const [yukleniyor, setYukleniyor] = useState(true);

  useEffect(() => {
    let iptal = false;
    setYukleniyor(true);
    fetchFatura(musteriId).then(veri => {
      if (!iptal) { setFatura(veri); setYukleniyor(false); }
    });
    return () => { iptal = true; }; // cleanup: component unmount olursa state güncellemeyi engeller
  }, [musteriId]);

  return { fatura, yukleniyor };
}

Android & iOS mağazasına yükleme

Android (Google Play)iOS (App Store)
Paket formatıAAB (Android App Bundle)IPA
Sürüm bilgisiversionCode (sayı, her yüklemede artar) + versionNameCFBundleVersion + CFBundleShortVersionString
İnceleme süreciGenelde saatler içindeApple review — genelde 1-2 gün, imza/provisioning profili gerekir
Expo ile modern yoleas build --platform all + eas submit — imzalama ve yükleme sürecini otomatikleştirir
💡
Netleştirmen gereken bir soru (kendine sor)Collabry projelerini Expo EAS ile mi yayınladın, yoksa manuel Xcode/Android Studio ile mi imzaladın? Mülakatta "store'a nasıl yükledin" sorusuna somut, gerçek cevap verebilmen için bunu netleştir — büyük ihtimalle EAS kullandın, bu da güncel best practice zaten.

Azure DevOps ile CI/CD

Jenkins'teki mantığın birebir aynısı, sadece YAML sözdizimi farklı. RN'de tipik pipeline: bağımlılık kur → lint/test → EAS build → EAS submit.

# azure-pipelines.yml
trigger: [main]
pool: { vmImage: "macos-latest" }
steps:
  - task: NodeTool@0
    inputs: { versionSpec: "20.x" }
  - script: npm ci
  - script: npx eas build --platform all --non-interactive
    env: { EXPO_TOKEN: $(EXPO_TOKEN) }

Farklı OS sürümlerini desteklemek

const stil = Platform.select({
  ios: { paddingTop: 44 },                      // notch/status bar payı
  android: { paddingTop: StatusBar.currentHeight },
});
// Farklı OS sürümlerini desteklemek: minSdkVersion (Android) ve
// "Deployment Target" (iOS) app.json/build.gradle'da ayarlanır.

Clean Code, Code Review, Refactoring

İlan bunları ayrı ayrı sayıyor çünkü senior'dan sadece "çalışan kod" değil, okunabilir ve sürdürülebilir kod bekleniyor. Somut örnek: bir component 300 satıra çıktığında (data fetching + UI + state mantığı iç içe) onu useFatura gibi custom hook'lara ve küçük alt component'lere bölmek — davranışı değiştirmeden (refactoring) okunabilirliği artırmak.

Egzersizler

1) Redux state'ini AsyncStorage ile kalıcı kılarken (redux-persist) hangi state'i whitelist'e ALMAZSIN, neden?
Hassas/geçici olanları: kimlik doğrulama token'ı (güvenlik riski — cihazda düz metin kalabilir), yükleniyor/hata gibi UI-only state'ler (uygulama yeniden açıldığında anlamsız), ve sık değişen büyük listeler (storage'ı şişirir, gereksiz I/O). Genelde sadece kullanıcı tercihleri ve sepet gibi "devam etmesi gereken" state whitelist'e alınır.
2) useEffect içinde cleanup fonksiyonu dönmezsen (iptal flag'i olmadan) ne gibi bir bug'a yol açabilirsin?
"Component unmount olduktan sonra state'i güncellemeye çalışıyorsun" uyarısı ve bellek sızıntısı riski. Somut senaryo: kullanıcı bir fatura detay ekranını açıp hemen geri gitti, ama network isteği hâlâ devam ediyor — istek tamamlandığında artık ekranda olmayan bir component'in state'ini güncellemeye çalışırsın, bu crash'e veya sessiz bug'lara yol açabilir.