React State Management — Redux

Redux Nedir?

Redux, JavaScript uygulamaları için öngörülebilir durum yönetimi kütüphanesidir. Genellikle React uygulamalarıyla birlikte kullanılır, diğer JavaScript framework ve kütüphaneleriyle de uyumludur. Redux, uygulamanızın durumunu merkezi bir yerde tutarak, bileşenler arasında durum paylaşımını ve yönetimini kolaylaştırır.

Redux’ın Temel Kavramları

Store:

• Uygulamanın tüm durumunu (state) saklayan merkezi depo.
• Tek bir store kullanımı önerilir.

State:

• Uygulamanın durumunu temsil eder.
• State, immutable (değişmez) bir yapıdır; yani, değiştirilemez, yalnızca yeni bir state ile değiştirilebilir.

Actions:

• State’te bir değişiklik yapılmasını talep eden JavaScript nesneleri.
• En az bir “type” alanı içermelidir, bu alan state'te ne tür bir değişiklik yapılacağını belirtir.

Reducers:

• Actions’a göre state’in nasıl değişeceğini belirten saf fonksiyonlardır.
• Mevcut state ve action’ı alır, yeni state’i döner.

Dispatch:

• Actions’ı tetiklemek için kullanılan yöntemdir.
• “dispatch(action)” ile bir action'ı store'a gönderirsiniz.

Redux Mimarisi

Redux’ın mimarisi temel olarak üç ana parçadan oluşur: “Actions”, “Reducers” ve “Store”.

1. Actions

Actions, bir uygulamanın durumunda yapılacak değişiklikleri tanımlar. Genellikle bir action, bir tür (type) ve bazı veriler (payload) içerir.

const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text,
  },
});

2. Reducers

Reducers, actions tarafından belirtilen değişiklikleri uygulayan fonksiyonlardır. Bir reducer, mevcut state ve action’ı alır, yeni state’i döner.

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.payload.text, completed: false }];
    default:
      return state;
  }
};

3. Store

Store, uygulamanızın durumunu tutar ve günceller. Ayrıca, durum değişikliklerini dinlemenizi sağlar.

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

const store = createStore(rootReducer);

Redux Kullanımı

Redux’ı kullanmaya başlamak için birkaç adım izlenir:

1. Redux Kütüphanesini Kurmak:

npm install redux react-redux

Actions ve Reducers Oluşturmak:

• actions.js dosyası:

export const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text,
  },
});

reducers.js dosyası:

import { combineReducers } from 'redux';

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.payload.text, completed: false }];
    default:
      return state;
  }
};

export default combineReducers({
  todos,
});

Store Oluşturmak:

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

const store = createStore(rootReducer);

React-Redux ile React Bileşenlerini Bağlamak:

• Provider bileşenini kullanarak store'u React uygulamanıza bağlayın.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,

  document.getElementById('root')
);

useSelector ve useDispatch hook'larını kullanarak store'dan veri almak ve action dispatch etmek.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo } from './actions';

const TodoApp = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = (text) => {
    dispatch(addTodo(text));
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={() => handleAddTodo('New Todo')}>Add Todo</button>
    </div>
  );
};

export default TodoApp;

Redux’ın Avantajları

1. Tahmin Edilebilirlik: State’in tek bir merkezi yerde tutulması, uygulamanızın durumunun daha tahmin edilebilir olmasını sağlar.
2. Kolay Test Edilebilirlik: Saf fonksiyonlar olan reducers, kolayca test edilebilir.
3. Zengin Geliştirici Araçları: Redux DevTools gibi araçlar, durum değişikliklerini ve action’ları takip etmeyi kolaylaştırır.
4. İzole Durum Yönetimi: Bileşenler arasında prop drilling olmadan durum paylaşımı sağlar.

Redux’ın Dezavantajları

1. Ekstra Kod: Küçük projeler için fazla boilerplate kodu gerektirebilir.
2. Öğrenme Eğrisi: Redux’ın temel kavramlarını ve çalışma mantığını anlamak zaman alabilir.
3. Güncelleme Yönetimi: State güncellemeleri bazen karmaşık hale gelebilir, özellikle büyük ve karmaşık uygulamalarda.

Redux, büyük ve karmaşık uygulamalarda durum yönetimini basitleştirirken, küçük projeler için gereksiz bir karmaşıklık katmanı ekleyebilir. Ancak, doğru kullanıldığında, uygulamanızın durumunu merkezi bir yerde yönetmek ve bu durumu tahmin edilebilir hale getirmek için güçlü bir araçtır. React ile birlikte kullanıldığında, uygulamanızın bileşenleri arasında durum paylaşımını ve yönetimini kolaylaştırarak geliştirici deneyimini iyileştirir.

Okuduğunuz için teşekkürler

• 👏 Beğendiyseniz alkışlayın ve beni takip edin 👉
• 📰 Daha fazla içerik görüntülemek için tıklayın
• 🔔 Beni takip edin: LinkedIn!

Her zaman gelişmek için yer olduğunu anlıyorum. Lütfen düşüncelerinizi paylaşmaktan çekinmeyin.