Photo by Anthony DELANOIX on Unsplash

React State Management

React Kütüphanelerinde Provider Pattern Kullanımı

React bileşen hiyerarşisinde bazen bir çok bileşene aynı veri yapısını sağlamamız gerekir bu gibi durumlarda bileşen child bileşenlere props şeklinde bu yapıyı geçirmektense belli Context üzerinden bu veriyi bileşenlere sağlamak için kullandığımız örüntüdür.

Bu örüntüyü nden React State Management kapsamında ele aldığımı düşünebilirsiniz. Çevrenizde kullandığınız bir çok kütüphanede Örneğin React-Router, Redux, ApolloGraphQL vb.. aşağıda şekilde App (Uygulama) bileşenini sarmaladığını görürürüz. Bu örüntüyü anlamamız bir çok kütüphaneyi rahat bir şekilde kullanabilmemize imkan sağlayacaktır.

Örneğin aşağıda Redux Toolkit örneğine bakalım. Redux Provider oluşturduğunuz Reducer store vererek bunun tüm bileşenler tarafından erişebilmesine olanak sağlanmış olur.

import { store } from './app/store';
import { Provider } from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Veya Apollo GraphQL Client örneğini inceleyelim. App altındaki tüm bileşenlerin ApolloClient erişebilmesinine imkan sağlamış oluruz.

const client = new ApolloClient({
 uri: 'https://tte.sse.codesandbox.io',
 cache: new InMemoryCache()
});

render(
 <ApolloProvider client={client}>
  <App/>
 </ApolloProvider>,
 document.getElementById('root'),
);

Veya React Router bakalım. Oluşturduğumuz Routing Bileşen yönlendirme bağlantılarını RouterProvider ile alt bileşenlerde kullanabilmemizi sağlar.

import Root from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

ReactQuery incelediğimizde QueryClientProvider üzerinden uygulama ve bileşen altyapısına bu client yapısının aktarıldığını görebilirsiniz.

mport { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

Tüm yukardaki örneklere baktığımızda bir Provider ile App bileşeninin sarmalandığını Wrap edildiğini görebilirsiniz.

Recoil’de benzer şekilde kütüphanenizin

function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <h1>Recoil!</h1>
        <Counter />
        <Display />
      </div>
    </RecoilRoot>
  );

React Context

Örneğin React Context, bizim istediğimiz seviyede Context oluşturup bunları alt bileşenlerde kullanabilmesine imkan sağlar.

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

Bu kısma kadar ne yapmak istediğimize bakalım. React Context aşağıdaki resimde olduğu gibi oluşan bir Context içerisindeki veriye ve bunun değiştirilmesi ve güncellenmesi ihtiyacı bulunur. Bu konuyu daha detaylı öğrenmek için daha önceden yazmış olduğum aşağıdaki yazıları okuyabilirler.

• React Docs -2 (DOM Tree Problems) içerisindeki React Context kısmı ile
• React Hooks useContext nedir ?

React Context.

React Context kullanımının Multiple Contextlerde çok karmaşık bir hal almasından dolayı zaman içerisinde büyük uygulamalarda daha Global bir State Management kütüphanesi ile yola devam edilmiş

• Redux
• Mobx
• Zustand

veya Server Side State Maangement kütüphaneri, Client State Management yöntemleri ile birleştirilmiştir.

• React Query
• Apollo Client

Not: Global State Management, ServerSide State Management ve ClientSide State Management arasındaki farkları daha iyi anlamak için aşağıdaki blog yazılarını okuyabilirsiniz.

• React State Management -3
• React Query sağladığı kolaylıklar

Provider Pattern Nasıl Çalışıyor ?

Aslında provider pattern olarak gördüğümüz kısım aslında arka planda createContext kullanarak çalışan bir HoC(High Order Component) yapısıdır. yaptığıda sarmalladığı tüm bileşenleri bu React Context yapısı üzerinden soyutladığı State Management api’lerini sunar.

Not: Yeni yaklaşımlarda bu iç içe sarmalama(Wrapping) veya Global State Management yapılarının performans açısından oluşturduğu bir takım problemler ve farklı pattern kullanım isteklerinden dolayı Zustand, Signal, Jotai gibi yeni State Management kütüphaneleri de ortaya çıkmıştır.

Referanslar

• Provider Pattern (patterns.dev)

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Redux) erişmek için bu linke tıklayabilirsiniz.