React'te Global State Yönetimi: Redux ve Context API Karşılaştırması

React ile geliştirme yaparken, birçok uygulama global bir state yönetimine ihtiyaç duyar. Kullanıcı oturumu, uygulama arayüz dili veya ana veri gibi verilere her sayfada erişebilme ihtiyacı, component'lar arasında veri iletimini karmaşıklaştırabilir. Redux ve Context API, bu tür global state yönetimi ihtiyaçlarını karşılamak için iki yaklaşım sunar. Ancak bu iki yaklaşım arasındaki farklar nelerdir?

Neden Global State Yönetimine İhtiyaç Var?

Proje karmaşıklığı arttıkça, component sayısı ve gereksinimler de artar. Bu durumda, veri iletimi daha sık hale gelir ve prop geçişi (props drilling) gibi bir sorunla karşılaşabiliriz. Bu, kodun okunabilirliğini azaltabilir ve bakımı zorlaştırabilir. Global bir state yönetimi, bu sorunları çözmek için kullanılabilir.

Örnek:

Aşağıdaki örnekte, MainPage adlı bir component'ten başlayarak, user ve language adlı iki state'in veri geçişini görüyoruz. Bu veriler, prop olarak ProductPage adlı bir component'e aktarılıyor. Ancak bu, kodun okunabilirliğini azaltabilir ve soruları artırabilir: "Bu veriler nereden geliyor?" ve "Bu verilerin kaynağı nedir?"

// MainPage.js
import React from 'react';
import ProductPage from './ProductPage';

const MainPage = () => {
  const user = 'John Doe';
  const language = 'English';

  return (
    <div>
      <h1>Welcome, {user}!</h1>
      <ProductPage user={user} language={language} />
    </div>
  );
};

export default MainPage;

// ProductPage.js
import React from 'react';

const ProductPage = ({ user, language }) => {
  // ...
  return (
    <div>
      <p>User: {user}</p>
      <p>Language: {language}</p>
      {/* ... */}
    </div>
  );
};

export default ProductPage;

Global State Yönetimi Nasıl Çalışır?

State yönetimi yapısı, temel olarak üç bileşenden oluşur:

1. Store: Global olarak saklanması gereken verilerin bulunduğu depo alanı.

2. Reducer: Global verileri güncelleyen fonksiyonlar topluluğu.

3. Provider: Component'leri saran ve yönlendiren bir bağlam (context) bileşeni.

Her iki yaklaşım, bu temel bileşenleri paylaşır. Projede bir mağaza (store) oluşturur ve global stateleri bu mağazada tanımlarsınız. Reducer ile bu stateleri güncelleyen fonksiyonları oluşturursunuz. Provider ile projenizi sarmalayarak gerekli bilgileri bu sağlayıcıya iletilir. Bu işlemleri bir kez yaparsınız ve daha sonra context'e bileşenlerden erişebilir ve global statelerinizi yönetebilirsiniz.

Örnekler:

Context API:

// store.js
import React, { createContext, useReducer } from 'react';

const initialState = {
  user: '',
  language: '',
};

export const Context = createContext();

export const StoreProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <Context.Provider value={{ state, dispatch }}>
      {children}
    </Context.Provider>
  );
};

// reducer.js
const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_LANGUAGE':
      return { ...state, language: action.payload };
    default:
      return state;
  }
};

export default reducer;

Redux:

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

// reducer.js
const initialState = {
  user: '',
  language: '',
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_LANGUAGE':
      return { ...state, language: action.payload };
    default:
      return state;
  }
};

export default rootReducer;

Provider:

Provider, component'leri saran ve yönlendiren bir bağlam (context) bileşenidir. Context API'da bu bileşen, Context ile oluşturulurken React tarafından sağlanırken, Redux'ta bu bileşen react-redux paketi tarafından otomatik olarak sağlanır.

Karşılaştırma:

1. Context API vs. Redux

   • Context API:

     • React'ın kendi context yapısını kullanarak global bir state yönetimi sağlar.

     • Daha temel bir yaklaşımdır.

     • react-redux gibi ek paketlere ihtiyaç duymaz.

     • Global statelere useContext ve useReducer hooklarıyla erişim sağlar.

     • Genellikle daha az kod karmaşıklığına sahiptir.

   • Redux:

     • Ayrı bir paket olarak kullanılır.

     • Daha fazla geliştirilmiş ve geniş bir ekosisteme sahiptir.

     • react-redux gibi ek paketlere ihtiyaç duyar.

     • Global statelere useSelector ve useDispatch hooklarıyla erişim sağlar.

     • Asenkron dispatch ve birden fazla reducer gibi karmaşık senaryolara daha iyi uyar.

2. Hangisini Tercih Etmeli?

   • Context API:

     • Global stateleriniz sık sık değişmiyorsa.

     • Birden fazla context kullanmanız gerekiyorsa.

     • Sadece global bir state yapısı kurmak istiyorsanız.

   • Redux:

     • Global stateleriniz sık sık güncelleniyorsa (örneğin, canlı veriyle çalışma).

     • Asenkron dispatch işlemlerine ihtiyacınız varsa.

     • Birden fazla reducer'a ihtiyaç duyuyorsanız.

Sonuç:

Her iki yaklaşım da React uygulamalarında global bir state yönetimini kolaylaştırmak için güçlü araçlardır. Hangi yöntemi seçeceğinizi, projenizin ihtiyaçlarına ve karmaşıklığına bağlı olarak belirlemelisiniz. Her iki yaklaşım da aynı temel prensiplere dayanır ve aynı temel tasarımı paylaşır.