React Native Öğreniyorum Bölüm 5

Bu bölümümüzde React Native’de Redux Toolkit kurulumu ve kullanımı detaylı bilgiler vermeye çalışacağım. Redux Toolkit , Redux kullanımını kolaylaştırmak için geliştirilmiş bir settir.Redux, Javascript uygulamalarında durum(state) yönetimi için yaygınca kullanılan bir kütüphanedir. Redux Toolkit, Redux kodunuzu daha verimli ve kolay bir şekilde yazmamıza imkan tanır.

Redux Toolkit’in Temel Özellikleri :

Kurulumun Basitleştirilmesi: Redux Toolkit, Redux ekosisteminde sıkça kullanılan paketleri içerir ve bu sayede ayrı ayrı kurulum yapmanıza gerek kalmaz. Örneğin, “redux-thunk” middleware’ı varsayılan olarak dahil edilmiştir.

Yapılandırma: Redux Toolkit, Redux store oluşturmak için “configureStore” fonksiyonunu sunar. Bu fonksiyon, Redux DevTools ve middleware gibi çeşitli yapılandırmaları otomatik olarak halleder.

Slice’lar: Redux Toolkit, “createSlice ” fonksiyonunu kullanarak Redux’taki reducer ve action’ları kolayca oluşturmanızı sağlar. Bir slice, durumunuzun bir parçasını ve bu durumla ilgili reducer ve action’ları temsil eder.

Immutable Update Logic: Redux Toolkit, “immer ”kütüphanesini kullanarak state güncellemelerini daha kolay ve güvenli hale getirir. Bu sayede state nesnelerini doğrudan değiştirebilirsiniz ve immer bu değişiklikleri güvenli şekilde işler.

Asenkron Mantık: “createAsyncThunk ” yardımcı fonksiyonu, asenkron işlemleri (API çağrıları gibi) yönetmek için kullanılır. Asenkron aksiyonlar oluşturmayı ve işlemeyi basitleştirir.

React Native ile Redux Toolkit Kurulumu

Redux Toolkit’i React Native uygulamanıza eklemek etmek için öncelikle gerekli paketleri yüklemeniz gerekmektedir:

npm install @reduxjs/toolkit react-redux

Slices ve Async Thunks

Redux Toolkit, uygulama durumunu ‘slices’ olarak yönetmeyi teşvik eder. Bir slice, durumun bir parçasını ve bu durumla ilgili redüserleri ve aksiyonları tanımlar. Bu yapı, kodun daha modüler ve yönetilebilir olmasını sağlar. Örnek bir slice :

import { createSlice } from '@reduxjs/toolkit';

const exampleSlice = createSlice({
  name: 'ornekSlice',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    }
  }
});

export const { increment } = exampleSlice.actions;
export default exampleSlice.reducer;

Yukarıdaki kodta , başlangıç durumu (initialState) ve bir ‘increment’ redüseri olan basit bir slice oluşturur.

Asenkron işlemler için Redux Toolkit, ‘createAsyncThunk’ fonksiyonunu sunar. API çağrıları gibi asenkron işlemleri yönetmek için kullanılır:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserData = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    return await response.json();
  }
);

Yukarıdaki fonksiyon API’den kullanıcı verisi çeken asenkron bir işlemi temsil eder.

Store Oluşturulması

Redux Toolkit, React Native uygulamalarında veri yönetiminin etkinliğini artırmak için mükemmel bir çözümdür.Redux Toolkit, Redux ile ilgili karmaşıklığı azaltırken, uygulamanızın ölçeklenebilirliğini ve bakım kolaylığını artırır.

Uygulama Örneği ;

Slice Tanımlamak

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'sayac',
  initialState: {
    value: 0,
  },
  reducers: {
    artir: state => {
      state.value += 1;
    },
    azalt: state => {
      state.value -= 1;
    },
  },
});

export const { artir, azalt} = counterSlice.actions;
export default counterSlice.reducer;

Store’a Reducer Eklemek

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Provider ile Uygulamayı Sarmalamak

React Native uygulamanızda Redux store’unu kullanmak için, uygulamanızı Provider ile sarmalamanız gerekir. Bu genellikle “App.js” dosyanızda yapılır.

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import CounterApp from './CounterApp';

export default function App() {
  return (
    <Provider store={store}>
      <CounterApp />
    </Provider>
  );
}

Komponentlerde Redux State’ini Kullanmak

// CounterApp.js
import React from 'react';
import { View, Button, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { artir, azalt} from './counterSlice';

export default function CounterApp() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Artır" onPress={() => dispatch(artir())} />
      <Button title="Azalt" onPress={() => dispatch(azalt())} />
    </View>
  );
}

Yukarıki kodlar, React Native’de Redux toolkit kullanarak basit bir sayaç uygulaması oluşturmamızı sağlar. Daha karmaşık uygualamalar için birden fazla slice oluşturabilir, asenkron işlemleri yönetmek için Redux toolkit’in createAsyncThunk fonksiyonunu kullanabiliriz.