Middleware, bir action dispatch edilmesi ile action'ın reducer'a ulaşması arasında oturur ve yan etkileri (async API çağrıları, logging) ele almak için action'ları kesintiye uğratmanızı sağlar — reducer'lar bunu yapamaz çünkü saf kalması gerekir. Thunks, en yaygın middleware'dir ve async mantığı mümkün kılar.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware dispatch'i sarar, bu nedenle her action reducer'lara ulaşmadan önce bunun içinden geçer. Bu, reducer'ların yasakladığı yan etkiler için belirlenmiş yerdir.
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
// ...need to dispatch the result into the store
}
Async iş yapmak (fetch) ve ardından sonucu dispatch etmek için bir yere ihtiyacınız var. Thunk middleware, düz bir nesne yerine bir function dispatch etmenize izin verir.
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
return async (dispatch, getState) => {
dispatch({ type: "users/loading" }); // 1. signal loading
try {
const users = await api.getUsers(); // 2. async side effect
dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
} catch (err) {
dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
}
};
}
// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
Thunk async işi gerçekleştirir ve her aşamada sade action'ları (loading/loaded/error) dispatch eder — reducer'ları saf tutarken yan etki thunk içinde yaşar.
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
Middleware, Redux'ın reducer'ların yapamadığı her şeyi ele alma yöntemidir — özellikle async yan etkileri — reducer'ları tahmin edilebilir ve test edilebilir kılan saflığı korurken.
Thunks, async yapmak (veri getirme, loading/success/error action'ları dispatch etme) için standart, erişilebilir bir yoldur.
Middleware işlem hattını ve thunk deseni anlamak, gerçek Redux uygulamaları için gereklidir, çünkü neredeyse hepsi veri yüklemesi gerektirir; RTK'nin createAsyncThunk'ı tam olarak buna dayanır.