React Tutorial 2023 48 – useContext Hook’u 2 – State Kontrol Araçları

Merhabalar.

Bu yazımda state kontorlü için kullanılan araçlara bakacağız.

React’ta state yönetimi için kullanılabilecek birkaç araç ve yöntem bulunmaktadır.

1. useState Hook’u:

React’in fonksiyonel bileşenlerinde kullanılan useState hook’u, bileşen içindeki state’i tanımlamak ve güncellemek için kullanılır.

import React, { useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

2. useReducer Hook’u

Karmaşık state yönetimi durumlarında, useReducer hook’u kullanılabilir. Bu hook, Redux benzeri bir state yönetim yaklaşımını sağlar.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const ExampleComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
};

3. Context API

Context API, global state yönetimi için kullanılır. Bileşenler arasında state paylaşımını kolaylaştırır.

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [value, setValue] = useState(0);

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

const ExampleComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
};

4. Redux

Redux, geniş ölçekli uygulamalarda state yönetimini kolaylaştırmak için kullanılan bir kütüphanedir. Redux, tek bir global store kullanır ve state değişikliklerini bir dizi belirli eylem (action) üzerinden yönetir.

// Örnek bir Redux kullanımı
// (Redux için ayrıntılı bir yapıyı anlatmak için daha fazla kod gerekir)

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

// React ile entegrasyon
import React from 'react';
import { Provider, connect } from 'react-redux';

const CounterComponent = ({ count, dispatch }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
  </div>
);

const ConnectedCounter = connect((state) => ({ count: state.count }))(CounterComponent);

const App = () => (
  <Provider store={store}>
    <ConnectedCounter />
  </Provider>
);

5. MobX:

MobX, React uygulamalarında kullanılabilecek başka bir state yönetimi kütüphanesidir. MobX, Observable State Tree (OST) kullanarak state yönetimini sağlar ve otomatik olarak bileşenleri günceller.

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

class CounterStore {
  @observable count = 0;

  @action increment = () => {
    this.count++;
  };
}

const counterStore = new CounterStore();

const CounterComponent = observer(() => (
  <div>
    <p>Count: {counterStore.count}</p>
    <button onClick={counterStore.increment}>Increment</button>
  </div>
));

6. Recoil

Facebook tarafından geliştirilen Recoil, React uygulamalarındaki state yönetimini kolaylaştırmak için tasarlanmış bir kütüphanedir. Recoil, atomlar ve selektörler gibi kavramlarla çalışır.

import { atom, useRecoilState } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0,
});

const CounterComponent = () => {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

7. Zustand

Zustand, minimalist bir state yönetimi kütüphanesidir. Küçük boyutu ve basit API’si ile dikkat çeker.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const CounterComponent = () => {
  const { count, increment } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Bu araçlar, React uygulamalarında state yönetimini daha etkili ve ölçeklenebilir hale getirmek için kullanılabilir. Seçim yaparken projenizin ihtiyaçlarına ve büyüklüğüne göre hangi kütüphanenin daha uygun olduğunu değerlendirebilirsiniz.

Bir sonraki yazımda görüşmek üzere.